1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How to customize filter menu operators in EJ2 Grid filter using Razor syntax

How to customize filter menu operators in EJ2 Grid filter using Razor syntax

Hello,

Can anyone please advise how can I make default filter operator in EJ2 MVC grid to be "contains" rather than "starts with"? I'd like to use Razor Html helper syntax for this. My grid control code is below. I've searched a lot and wasn't able to find any example of it.

Thanks in advance!

@(Html.EJS().Grid("Grid")
            .DataSource(Model)
            .GridLines(GridLine.Both)
            .Height("400")
            .RowHeight(20)
            .AllowPaging()
            .PageSettings(p =>
            {
                p.PageSizes(new List<int>() { 200, 100, 50, 20 });
            })
            .AllowSorting()
            .AllowFiltering()
            .FilterSettings(filter =>
                {
                    filter.Type(FilterType.Menu);
                })
            .Columns(col =>
            {
                col.Field("Channel").Width("150").TextAlign(TextAlign.Left).Add();
                col.Field("Country").Width("90").TextAlign(TextAlign.Left).Add();
                col.Field("Currency").HeaderText("Curr.").ClipMode(ClipMode.Clip).Width("35").TextAlign(TextAlign.Left).Add();
                col.Field("SKU").Width("180").TextAlign(TextAlign.Left).Add();
                col.Field("Title").Width("120").TextAlign(TextAlign.Left).Add();
                col.Field("ChannelSKU").Width("150").TextAlign(TextAlign.Left).Add();
                col.Field("QuantityOrdered").ClipMode(ClipMode.Clip).HeaderText("Qty").Width("25").TextAlign(TextAlign.Center).Format("0").Add();
                col.Field("Amount").ClipMode(ClipMode.Clip).Width("50").TextAlign(TextAlign.Right).Format("0.0").Add();
                col.Field("Cost").ClipMode(ClipMode.Clip).Width("50").TextAlign(TextAlign.Right).Format("0.0").Add();
 
            })
            .Render())

8 Replies
PS Pavithra Subramaniyam Syncfusion Team June 19, 2018 01:16 PM UTC

Hi Vasyl, 
 
We have checked your query and You can set the default operator value in the Menu filter dialog by using ‘actionComplete’ event of Grid component which will be triggered after any grid actions. In that event you can set the default filter operator value in the menu filter operator dropdown list. We have prepared a simple sample based on your requirement. Please refer to the below code example, Documentation link and sample link. 
 
[index.chtml] 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    .  .  . 
    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 
 
}).Height("400").ActionComplete("afterFilterOpen").AllowPaging().AllowSorting().AllowFiltering().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render() 
 
</div> 
<script> 
 
    function afterFilterOpen(args) { 
        if (args.requestType == "filterafteropen" && args.columnName == "CustomerID") {           
                args.filterModel.dlgDiv.querySelector('input').ej2_instances[0].value = 'contains';  
            } 
    } 
 
</script> 
 
 
 
Regards, 
Pavithra S. 


VS Vasyl Shepelyov June 19, 2018 02:15 PM UTC

Hi Pavithra,

Many thanks, it works perfectly well. Is it possible to modify the script so that it works for all columns of text type rather than for specific column only?

Best regards,
Vasyl

PS Pavithra Subramaniyam Syncfusion Team June 20, 2018 07:17 AM UTC

Hi Vasyl, 

You can achieve your requirement by changing the condition to check the column type instead of  particular column name in the actionComplete event of Grid component. Please refer to the below code example and Sample link. 

[index.chtml] 
 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("OrderID").Width("30%").Add(); 
    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); 
    col.Field("ShipCity").HeaderText("ShipCity").Width("30%").Add(); 
    col.Field("Freight").HeaderText("Freight").Width("70").Add(); 
 
}).Height("400").ActionComplete("afterFilterOpen").AllowPaging().AllowSorting().AllowFiltering().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render() 
 
<script> 
 
    function afterFilterOpen(args) { 
        if (args.requestType == "filterafteropen" && args.columnType == "string") {             // checking the type 
                args.filterModel.dlgDiv.querySelector('input').ej2_instances[0].value = 'contains'; 
            } 
    } 
 
</script> 


Regards, 
Pavithra S. 


VS Vasyl Shepelyov June 20, 2018 07:21 AM UTC

Hi Pavithra, many thanks, it does the job!

PS Pavithra Subramaniyam Syncfusion Team June 21, 2018 12:30 PM UTC

Hi Vasyl, 
 
Thanks for your update. 
 
We are glad to hear that the provided solution helps you. 
 
Please contact us if you have any queries. 
 
Regards, 
Pavithra S. 


PB Pratik Bakare January 17, 2020 09:56 AM UTC

Hello, I tried the above solution but it says "TypeError: args.filterModel.dlgDiv is undefined"

PB Pratik Bakare January 17, 2020 09:57 AM UTC

also where can i find API documentation for "args.filterModel."

BS Balaji Sekar Syncfusion Team January 20, 2020 09:12 AM UTC

Hi Vasyl,  
 
We have validated your query in our end but it was unsuccessful. We have video demonstrate of the your requirement with our Grid behavior. Please refer the below video link for your reference. 
 
 
If we misunderstood your query, please share the replicate procedure of the problem or share the issue reproducing sample to us it will help to validate further. 
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon