Category / Section
How to perform multiple value filtering for same column in Grid
1 min read
This article explains how to perform multiple value filtering for the same column by using the FilterByColumn method.
In Blazor Grid, you can perform filtering operation programmatically by using the FilterByColumn method of Grid.
In the following code example, we have filtered CustomerID column values(ALFKI and BLONP) using the FilterByColumn method in a button click. Find the below code snippets for your reference.
@using Syncfusion.Blazor.Grids <button @onclick="Filter">Filter multiple values in same column(CustomerID)</button> <SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> </GridColumns> </SfGrid> @code{ SfGrid<Order> Grid { get; set; } public List<Order> Orders { get; set; } protected override void OnInitialized() { Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)], }).ToList(); } public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } public async Task Filter() { await Grid.FilterByColumn("CustomerID", "equal", new List<string> { "ALFKI", "BLONP" }, "or"); } }
Reference
Please refer the following API documentation link: