Hi Telerik team,
In a Blazor Grid with filters enabled the event "OnStateChanged" is fired twice when I use a filter (set, change, remove).
---
ADMIN EDIT
This behavior is expected - when the grid is filtered, there are two actions that happen:
This is not something we intend to change at this point.
---
To reproduce this I took one of the provided examples and added the event handler:
@page "/"
<TelerikGrid Data=@GridData
SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
SelectedItems="@PersistedSelectedItems"
@bind-Page="@CurrentPage"
PageSize="@PageSize"
Pageable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateChanged="@((GridStateEventArgs<Employee> args) => OnStateChangedHandler(args))">
<GridColumns>
<GridCheckboxColumn />
<GridColumn Field=@nameof(Employee.EmployeeId) />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) />
</GridColumns>
</TelerikGrid>
@if (PersistedSelectedItems != null)
{
<ul>
@foreach (Employee employee in PersistedSelectedItems.OrderBy(e => e.EmployeeId))
{
<li>
@employee.EmployeeId
</li>
}
</ul>
}
@code {
public List<Employee> PersistedSelectedItems { get; set; } = new List<Employee>();
int CurrentPage { get; set; }
int PageSize { get; set; } = 5;
private async void OnStateChangedHandler(GridStateEventArgs<Employee> args)
{
await Task.Delay(5000);
}
protected void OnSelect(IEnumerable<Employee> employees)
{
IEnumerable<Employee> CurrentPageEmployees = GridData.Skip(PageSize * (CurrentPage - 1)).Take(PageSize);
if (employees == null || employees.Count() == 0)
{
//the user de-selected all items with the header checkbox
PersistedSelectedItems = PersistedSelectedItems.Except(CurrentPageEmployees).ToList();
}
else
{
//handle any deselected items
var UnselectedEmployees = CurrentPageEmployees.Except(employees);
PersistedSelectedItems = PersistedSelectedItems.Except(UnselectedEmployees).ToList();
//add any new items if they were not selected already
foreach (var item in employees)
{
if (!PersistedSelectedItems.Contains(item))
{
PersistedSelectedItems.Add(item);
}
}
}
}
//data binding and sample data
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
Best regards,
Rayko
A workaround is to initialize the collection of the selected items:
<TelerikButton OnClick="@LoadData">Load Data</TelerikButton>
<TelerikGrid Data=@adminUsers Height="300px" Pageable=true PageSize=10 SelectionMode="@GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedAdminUsers">
<GridColumns>
<GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>
<GridColumn Field=@nameof(User.DisplayName) Title="User Name" />
<GridColumn Field=@nameof(User.Department) Title="Department" />
<GridColumn Field=@nameof(User.Status) Title="Status" />
<GridColumn Field=@nameof(User.EmployeeId) Title="Employee Id" />
</GridColumns>
</TelerikGrid>
@code
{
public IEnumerable<User> SelectedAdminUsers { get; set; } = Enumerable.Empty<User>();
public List<User> adminUsers { get; set; }
void LoadData()
{
adminUsers = Enumerable.Range(1, 200).Select(x => new User
{
EmployeeId = x,
Status = $"status {x}",
Department = $"department {x}",
DisplayName = $"name {x}"
}
).ToList();
}
public class User
{
public string DisplayName { get; set; }
public string Department { get; set; }
public string Status { get; set; }
public int EmployeeId { get; set; }
}
}
Before, the Value from the first item in the Data was populated through @bind-Value to the view model. It no longer is.
In the following snippet, I expect to see "1" in the initial load of the page, but I see "0" - the default value for the integer.
@selectedValue
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue">
</TelerikDropDownList>
@code {
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; }
}
You may get an exception like
InvalidOperationException: The current thread is not associated with the Dispatcher. Use Invoke() or InvokeAsync() to switch execution to the Dispatcher when triggering rendering or modifying any state accessed during rendering.
or you may get components that simply don't work (for example, a Window does not show, a treeview does not expand).
The solution is to revert to the RenderComponentAsync method in your _Hosts.cshtml file.