1. Home
  2. Forum
  3. Blazor
  4. How to add AND/OR predicates by columns in the Grid filters

How to add AND/OR predicates by columns in the Grid filters

I am using WebApiAdaptor and I would like to know how can I assign predicates (AND/OR) by columns in the grid filters.

e.g.



I would like to do something like this: 

Col2:20 || Col3:10 && Col4:3

Thanks.



3 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team October 1, 2020 02:52 PM UTC

Hi Zeun, 

Greetings from Syncfusion. 

Query: How to add AND/OR predicates by columns in the Grid filters 

We have validated your query and you want to perform the filtering operation with combination of predicates(AND/OR). You can achieve your requirement by using adding the predicates in FilterByColumn method itself or you can generate and pass the predicates in Grid query.  

By Generating predicate and pass to Grid Query: 

You can also generate the predicate and pass the query to Grid query to achieve your requirement. Here, we have generated filter predicated and pass the predicates to Grid query in button click. Find the below code snippets for your reference. 

 
<button @onclick="Filter"> Filtering</button> 
<button @onclick="ClearFilter"> Clear Filtering</button> 
 
<SfGrid @ref="Grid" Query="GridQuery" DataSource="@Orders" AllowFiltering="true"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public string val = "ANANTR"; 
    SfGrid<Order> Grid { get; set; } 
    public Query GridQuery { get; set; } 
 
    . . . 
 
    public void Filter() 
    { 
        GridQuery = new Query(); 
        var ColPre = new WhereFilter(); 
        var last = new WhereFilter(); 
        List<WhereFilter> OrPredicate = new List<WhereFilter>(); 
        List<WhereFilter> AndPredicate = new List<WhereFilter>(); 
        OrPredicate.Add(new WhereFilter() 
        { 
            Field = "OrderID", 
            value = 1001, 
            Operator = "equal", 
            IgnoreCase = true 
        }); 
        AndPredicate.Add(new WhereFilter() 
        { 
            Field = "CustomerID", 
            value = "ALFKI", 
            Operator = "equal", 
            IgnoreCase = true 
        }); 
        AndPredicate.Add(new WhereFilter() 
        { 
            Field = "Freight", 
            value = 2.30, 
            Operator = "equal", 
            IgnoreCase = true 
        }); 
        ColPre = WhereFilter.And(AndPredicate); 
        last = WhereFilter.Or(OrPredicate); 
        GridQuery = new Query().Where(ColPre.Or(last));   //passing the generated predicate in Grid query 
    } 
    public void ClearFilter() 
    { 
        GridQuery = new Query();     // for clearing the filter 
    } 
} 


By using FilterByColumn method, 

You can render a TextBox in FilterTemplate and perform filter operation based on the entered value in text box. Find the below code snippets for your reference. 

 
<SfGrid @ref="Grid" Query="GridQuery" DataSource="@Orders" AllowFiltering="true"> 
    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"> 
            <FilterTemplate> 
                <SfTextBox Placeholder='First Name' ValueChange="ValueChange1"></SfTextBox> 
            </FilterTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 
            <FilterTemplate> 
                <SfTextBox Placeholder='First Name' ValueChange="ValueChange2"></SfTextBox> 
            </FilterTemplate> 
        </GridColumn> 
        . . .  
    </GridColumns> 
</SfGrid> 
 
@code{ 
    . . . 
    public void ValueChange1(ChangedEventArgs args) 
    { 
        if (args.Value == "") 
        { 
            Grid.ClearFiltering(); 
        } 
        else 
        { 
            Grid.FilterByColumn("OrderID", "equal", args.Value, "and", false, true); 
        } 
    } 
     
    . ..  
} 

Please let us know if you have any concerns. 

Regards, 
Rahul 
 


Marked as answer
ZE Zeun October 3, 2020 07:10 PM UTC

I tried the first solution, and it worked correctly.

Thank you very much

MB Maran Baskar Syncfusion Team October 5, 2020 02:48 PM UTC

Hi Kennedy,

Thank you for your response. We are glad that our solution has resolved your query. 

Please get back to us, if you need any further assistance. 


Regards,

Maran Baskar


Loader.
Up arrow icon