How to perform multiple value filtering for same column in Grid
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:
Conclusion
I hope you enjoyed learning about how to perform multiple value filtering for same column in Grid.
You can refer to our Blazor Grid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Grid example to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
