I use a custom filter row for the Grid where I have added a custom component holding the filter cell content. I am saving the Grid state upon change and restoring it on initialization.
I noticed that the custom filter component is initialized before the Grid state. As a result, there is an applied filter but the input in the custom filter component does not show it.
This behaviour was new since version 6.0.0. With 5.1.1 it doesn't appear.
When the Grid/TreeList is in incell edit mode and you finish editing a cell by pressing "Enter", the focus is lost if the next cell to be edited is not editable.
Steps to reproduce:
@using System.ComponentModel.DataAnnotations;
<TelerikGrid Data="@forecasts"
Height="550px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
Pageable="true"
PageSize="20"
Groupable="true" Resizable="true"
Reorderable="true"
EditMode="@GridEditMode.Incell">
<GridColumns>
<GridColumn Field="Id" Title="Id" Width="100px" Editable="false" Groupable="false" />
<GridColumn Field="Summary" Id="summary" Title="telerik bind-Value">
<Template>
@{
var model = context as WeatherForecast;
<span>@model.Summary</span>
}
</Template>
<EditorTemplate>
@{
var model = context as WeatherForecast;
if (model.CanEdit)
{
<TelerikTextBox @bind-Value="@model.Summary"></TelerikTextBox>
}
else
{
@model.Summary
}
}
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
List<WeatherForecast> forecasts { get; set; }
protected override void OnInitialized()
{
forecasts = WeatherForecast.GetForecastList();
}
public class WeatherForecast
{
public int Id { get; set; }
public string Summary { get; set; }
public bool CanEdit { get; set; }
static public List<WeatherForecast> GetForecastList()
{
var rng = new Random();
return Enumerable.Range(1, 150).Select(index => new WeatherForecast
{
Id = index,
Summary = Summaries[rng.Next(Summaries.Length)],
CanEdit = index % 3 != 0
}).ToList();
}
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
}
}
The focus is lost
The focus should not be lost
All
All
x.y.z
x.y.z
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; }
}
}