Applying filter on every filter value change

[Lukasz Pesik]

Hi!

Is it possible to customize filtering behavior, to achive filter apply on data set after every change in filter cell?

Thanks in advance.

[Rahul Narayanasamy]

Hi Lukasz, 

Greetings from Syncfusion. 

Query: Is it possible to customize filtering behavior, to achive filter apply on data set after every change in filter cell? 

We have validated your query and you want to perform filtering operation after every change in the filter cell without pressing Enter. By default, FilterBarMode will be OnEnter. So that filter action will take place on enter key.  

We suggest you to change the FilterBarMode to Immediate to achieve your requirement to perform filter action without pressing enter key. And also ImmediateModeDelay property is used to determine the milliseconds the grid has to perform filter action.      

Reference: 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ImmediateModeDelay  

Refer the below code example.  

@using Syncfusion.Blazor.Grids 

 

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 

    <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="200"></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{ 

    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; } 

    } 

} 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Lukasz Pesik]

Thanks, that was exactly what I need 

[Rahul Narayanasamy]

Hi Lukasz, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful to achieve your requirement. Please get back to us if you need further assistance. 

 

Regards, 

Rahul