The Grid PageSizes DropDownList will not select a new value if it the current value is not visible in the open dropdown. This can happen if there are too many items in the DropDownList and the user has scrolled the PageSizes dropdown.
The problem occurs only when Navigable="true".
Here is a REPL test page
The easiest workaround is to fewer items in the PageSizes DropDownList, so that there is no need for scrolling.
I am using Telerik Grid in our project and I have enabled the feature Reorderable="true". At GridColumnMenuSettings I am getting the following options:
Set column position :
Those options are commonly showing for all columns but I want to disable "Move Next" option for the last column and "Move Previous" option for the first column as these options are not applicable to the corresponding columns.
I noticed a different behavior when filtering programmatically through the state and when you use the filter UI.
When filtering programmatically the filter is set after the data arrives. I am using a FiltterMenu and the filter icon is colored to indicate there is an applied filter only after the data is filtered. When filtering from the menu, I can the opposite behavior - the filter is set first and then the data is filtered. To me, this seems to be the correct behavior.
Reproduction: https://blazorrepl.telerik.com/wSavwTPd367WqA9r37.
I have a TelerikGrid with Reordarable enabled inside of a TelerikWindow. Reordering of the column works fine only the drop clue is not showing. I think this is because the z-index is incorrect.
Missing drop clue:
z-index of drop clue is 10000:
z-index of window is 10002:
We want frozen columns exactly like this:
When a user deletes a record that decreases the number of pages on that Grid, and then they try to edit or add a record, they get stuck in the OnCancel event handler, which gets called over and over in an endless loop.
The behavior can be seen:
Steps To Reproduce
https://blazorrepl.telerik.com/GokIvFva42BLx7yl37
1. Delete item 11. The Grid will move you to page 1.
2. Try to edit or add a new item. OnCancel will fire in a loop.
3. If OnAdd and OnEdit are not defined, the loop will occur in OnUpdate and OnCancel.
On grids with a lot of data there is a delay between when the grid is assigned the data to when the grid shows the data. During this UI painting period, the NoDataTemplate is displayed for a second or two.
The grid should not show the NoDataTemplate unless the data source is loaded with an empty collection, not just while it is still trying to show the data.
Note: Having a generic message like in the documentation "No Data available / The data is still loading ..." is not satisfying our users. (Blazor Grid - No Data Template - Telerik UI for Blazor) These should really be two different states that can show different messages.
Thanks
When the user drags a third column to the Grid Group Panel, it ends up being second, instead of last. It looks like each new column is inserted at index 1, instead of appended last (when this is the user's intent).
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
The header cell includes the following inner elements when the Grid is sortable:
However, if I disable sorting all those elements are omitted which is not consistent.
The Grid exits edit mode when expanding or collapsing rows in a hierarchy scenario. This only happens when OnStateChanged is set.
Test page that reproduces the behavior: https://blazorrepl.telerik.com/wIkJvdlo09hXCV8u03
Error: System.OverflowException: Value was either too large or too small for a Decimal.
Could there be an option to NOT close the filter dropdown when the clear button is pressed? Is there an AutoClose parameter or something else?
I just got a request for this, and their thought is they will have a filter set, then want to click clear, and then still pick new items to filter before leaving the dropdown.The Grid will cancel the insertion of a new item when:
===
In the meantime, a possible workaround is to hide the expand button for items, which are not added to the "permanent" Grid data yet. Here is how to do it with CSS:
.k-grid-add-row .k-hierarchy-cell .k-icon {
display: none;
}
I have the following configuration:
Editor component in Grid EditorTemplate and the Grid editing mode is popup
Here is a REPL example https://blazorrepl.telerik.com/QeuUwsvb15sxbLuB04
The popup that opens when editing the Grid resizes when I type in the Editor
Steps to reproduce the issue:
1. Run the REPL example
2. Click the Edit button in the Grid
3. Resize the popup
4. Start to type something in the Editor
5. The popup resizes
The Grid shows row skeletons in virtual scrolling scenarios when:
Test page: https://blazorrepl.telerik.com/mSkBaXkC50cEXmMB42
A possible workaround is to:
Example: https://blazorrepl.telerik.com/cSYrvEYW19htMCD934
Another possible solution is to disable the virtual scrolling at runtime if the total item count is too small: https://blazorrepl.telerik.com/mSOhvYuW47DaMk6c00
In a navigable Grid with incell edit, if a column has Editable=false the tabbing behavior is as follows: while the user is editing the previous editable cell pressing tab results in skipping the non-editable cell and moving the focus to the next editable cell to open it for edit.
However, the behavior is different when cancelling the editing through the OnEdit event. In this case, while the user is editing the previous editable cell pressing tab results in exiting the edit and keeping the focus to the cell. Subsequent tab press moves to focus to the pager.
Reproduction: https://blazorrepl.telerik.com/mykLFEFJ14mlqei429.
===
ADMIN EDIT
===
A possible option for the time being is to cancel the edit as shown in the example above but also force the Grid to enter edit of the next editable cell. You can do that through the State: Enter and Exit Grid Edit Mode Programmatically.
Here is a basic example, you may adjust it as needed to fit your exact requirements: https://blazorrepl.telerik.com/mSuLPAFP05HRs7B555.