Grid CheckBoxList过滤

你可以更改过滤器菜单以显示具有来自数据源的不同值的复选框列表。这让您的用户可以根据常见的值快速筛选记录，并轻松地选择多个值。其行为类似于Excel筛选。

基本设置

在网格中启用复选框列表过滤:

1. 设置FilterMode参数Telerik.Blazor.GridFilterMode.FilterMenu
2. 设置FilterMenuType参数Telerik.Blazor.FilterMenuType.CheckBoxList．默认为菜单对于默认行为。

您还可以更改特定列(它自己的列)的筛选器菜单行为FilterMenuType参数可以为菜单或CheckBoxList不管主网格参数如何。这让您可以根据应用程序的需要混合这两种模式——您可以让所有网格列使用单一设置的相同模式，也可以为少数需要不太常见模式的列覆盖它。

@*复选框列表过滤的名称，团队和假期列，ID列覆盖它到菜单*@         @code { public List GridData { get; set; } protected override void OnInitialized() { GridData = new List(); var rand = new Random(); for (int i = 0; i < 15; i++) { GridData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 3, IsOnLeave = i % 2 == 0 }); } } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } public bool IsOnLeave { get; set; } } }

自定义数据

默认情况下，网格接受截然不同的的值。数据为每个字段填充复选框列表筛选器。

当使用OnRead事件为了自定义数据操作和/或在服务器/服务上执行这些操作，网格将只有当前页面的数据。这将限制用户看到的选项，因此您可能需要提供完整的列表。

属性可自定义复选框列表行为筛选菜单模板．为了帮助你，我们曝光了TelerikCheckBoxListFilter控件中的FilterMenuTemplate来获取默认的网格UI。提供如下设置:

• FilterDescriptor-选择复选框时将填充过滤器的过滤器描述符。组件为您创建必要的描述符并读取现有的描述符。这使得它很容易插入网格，而不需要通过双向绑定(@bind-FilterDescriptor = " @context。FilterDescriptor”) . .

• 数据-将在复选框列表中呈现的数据。在这里，您可以提供所需的选项来更改网格显示的内容。

• 场-字段从将用于取的数据截然不同的选项。它必须与为其定义筛选器的列字段的名称和类型匹配。这允许您使用网格使用的相同模型，或者定义更小的模型以减少为筛选器列表获取的数据。

@using Telerik。数据Source @using Telerik.DataSource.Extensions Filter by selecting a few names. Then filter by the Teams field (the fields that use application-provided data).
 You will see you have all the options for the teams and all the options for the names.
 Now try to filter by the On Vacation column - it will use only the current grid data and you may have only a single option, depending on how you filter the data so you may never be able to get back all values.                   @code { List AllGridData { get; set; } #region custom-filter-data List TeamsList { get; set; } List NameOptions { get; set; } //obtain filter lists data from the data source to show all options async Task GetTeamOptions() { if (TeamsList == null) // sample of caching since we always want all distinct options, //but we don't want to make unnecessary requests { TeamsList = await GetNamesFromService(); } } async Task> GetNamesFromService() { await Task.Delay(500);// simulate a real service delay // this is just one example of getting distinct values from the full data source // in a real case you'd probably call your data service here instead // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic) List data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team). Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList(); return await Task.FromResult(data); } async Task GetNameOptions() { if (NameOptions == null) { NameOptions = await GetNameOptionsFromService(); } } async Task> GetNameOptionsFromService() { await Task.Delay(500);// simulate a real service delay List data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name). Distinct().Select(n => new NameFilterOption { Name = n }).ToList(); return await Task.FromResult(data); } #endregion custom-filter-data async Task OnReadHandler(GridReadEventArgs args) { //typical data retrieval for the grid var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request); args.Data = filteredData.Data as IEnumerable; args.Total = filteredData.Total; } protected override async Task OnInitializedAsync() { // generate data that simulates the database for this example // the actual grid data is retrieve in its OnRead handler AllGridData = new List(); var rand = new Random(); for (int i = 1; i <= 15; i++) { AllGridData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 3, IsOnLeave = i % 2 == 0 }); } // get custom filters data. In a future version you will be able to call these methods // from the template initialization instead of here (or in OnRead) so that they fetch data // only when the user actually needs filter values, instead of always - that could improve server performance await GetTeamOptions(); await GetNameOptions(); } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } public bool IsOnLeave { get; set; } } // in this sample we use simplified models to fetch less data from the service // instead of using the full Employee model that has many fields we do not need for the filters public class TeamNameFilterOption { public string Team { get; set; } } public class NameFilterOption { public string Name { get; set; } } }

另请参阅

• 网格过滤概述
• 现场演示:网格复选框列表过滤器