diff --git a/knowledge-base/grid-combine-filters-checkbox.md b/knowledge-base/grid-combine-filters-checkbox.md new file mode 100644 index 000000000..b79076c2e --- /dev/null +++ b/knowledge-base/grid-combine-filters-checkbox.md @@ -0,0 +1,204 @@ +--- +title: Combine a Default Filter Menu with a Checkbox List +description: Learn how to create Excel-like filtering in Blazor Data Grid columns by combining operator-based filters and checkbox lists. +type: how-to +page_title: Combine a Default Filter Menu with a Checkbox List +meta_title: Combine a Default Filter Menu with a Checkbox List +slug: grid-kb-combine-filters-checkbox +tags: grid, blazor, filter, menu, template, checkbox, list, excel +res_type: kb +ticketid: 1708346 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I want to enable "Excel-like" filtering in the Blazor Grid. Specifically, for each column, I want to combine operator-based filtering (e.g., contains or equals) with a checkbox list for selecting distinct values from the data source. By default, the Blazor Grid allows either the filter menu or the checkbox list, but not both simultaneously. + +## Solution + +To combine operator-based filters and checkbox lists in the same column, use the [`FilterMenuTemplate`](slug:grid-templates-filter#filter-menu-template) that allows you to customize the filter menu. + +````Razor +@using Telerik.DataSource + + + + + + + + @{ + EnsureFilterDescriptors(context); + var fd0 = (FilterDescriptor)context.FilterDescriptor.FilterDescriptors[0]; + var fd1 = (FilterDescriptor)context.FilterDescriptor.FilterDescriptors[1]; + } + + + + + + + + + + + + + + + + + + @foreach (var size in Sizes) + { +
+ + +
+ } +
+
+
+
+ +@code { + private List GridData { get; set; } + private string[] Sizes = new[] { "XS", "S", "M", "L", "XL", null }; + + private readonly List> FilterOperators = + Enum.GetValues(typeof(FilterOperator)) + .Cast() + .Select(o => new DropDownItem + { + Text = o.ToString(), + Value = o + }).ToList(); + + private readonly List> LogicalOperators = + Enum.GetValues(typeof(FilterCompositionLogicalOperator)) + .Cast() + .Select(o => new DropDownItem + { + Text = o.ToString(), + Value = o + }).ToList(); + + private void EnsureFilterDescriptors(FilterMenuTemplateContext context) + { + while (context.FilterDescriptor.FilterDescriptors.Count < 2) + { + context.FilterDescriptor.FilterDescriptors.Add(new FilterDescriptor()); + } + } + + private bool IsCheckboxInCurrentFilter(CompositeFilterDescriptor filterDescriptor, string size) + { + if (size == null) + { + return filterDescriptor.FilterDescriptors + .OfType() + .Any(fd => fd.Operator == FilterOperator.IsNull); + } + + return filterDescriptor.FilterDescriptors + .OfType() + .Any(fd => fd.Value?.ToString() == size); + } + + private void UpdateCheckedSizes(bool isChecked, string itemValue, FilterMenuTemplateContext context) + { + var composite = context.FilterDescriptor; + composite.LogicalOperator = FilterCompositionLogicalOperator.Or; + + if (!isChecked) + { + var toRemove = composite.FilterDescriptors + .OfType() + .FirstOrDefault(fd => + (fd.Operator == FilterOperator.IsNull && itemValue == null) || + (fd.Operator == FilterOperator.IsEqualTo && fd.Value?.ToString() == itemValue)); + + if (toRemove != null) + { + composite.FilterDescriptors.Remove(toRemove); + } + } + else + { + composite.FilterDescriptors.Add(new FilterDescriptor + { + Member = nameof(Product.Size), + MemberType = typeof(string), + Operator = itemValue == null ? FilterOperator.IsNull : FilterOperator.IsEqualTo, + Value = itemValue + }); + } + } + + protected override void OnInitialized() + { + GridData = Enumerable.Range(1, 70).Select(x => new Product + { + Id = x, + Name = $"Product {x}", + Size = Sizes[x % Sizes.Length] + }).ToList(); + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } + public string Size { get; set; } + } + + public class DropDownItem + { + public string Text { get; set; } + public T Value { get; set; } + } +} +```` + +## See Also + +* [Filter Menu Template Documentation](slug:grid-templates-filter#filter-menu-template) +* [Filter Menu Documentation](slug:grid-filter-menu) +* [CheckBoxList Filter Documentation](slug:grid-checklist-filter)