Articles in this section
Category / Section

How to perform multiple value filtering for same column in Grid

3 mins 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:   

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumn_

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied