How to change the default comparison operator of the filter bar.

1 min read

In our current implementation of the grid filter bar’s default operator for string column is “startswith” and for the numeric column is “equal”.

We can change the default operator of the filter bar to other operators like contains, lessthan and etc. using actionBegin client side event of the grid as follows.

Example:

JS:

<script type="text/javascript">
             $("#Grid").ejGrid({
                    dataSource: ej.DataManager(window.gridData),
                    allowPaging: true,
                    allowFiltering: true,
                    columns: [
                                 { field: "OrderID", headerText: "Order ID",width: 75 },
                                 { field: "CustomerID", headerText: "Customer ID", width: 90 },
                                 { field: "EmployeeID", headerText: "Employee ID", width: 75 },
                                 { field: "Freight", headerText: "Freight", width: 75 },
                                 { field: "ShipCountry", headerText: "Ship Country", width: 90 },
                                 { field: "ShipCity", headerText: "ShipCity", width: 80 }
                ],
                    actionBegin: "actionbegin"
  });
  </script>

MVC:

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.AllowFiltering()
.Columns(col => {
            col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
            col.Field("Freight").HeaderText("Freight").Width(75).Format("{0:C}").Add();
            col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
            col.Field("ShipCountry").HeaderText("Ship Country").Width(80).Add();
})
.ClientSideEvents(eve => { eve.ActionBegin("actionbegin"); })
 )

ASP:

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowFiltering="true" >
       <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" Width="75" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"/>
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75"/>
                <ej:Column Field="Freight" HeaderText="Freight" Width="75"/>
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90"/>   
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="80"/>                
        </Columns>
        <ClientSideEvents ActionBegin="actionbegin" />
</ej:Grid>

Changing the operator:

<script type="text/javascript">
function actionbegin(args)
{
      if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith")
                args.currentFilterObject[0].operator = "contains";
}
</script>

Result:

Figure: Filterbar with contains operator

Did you find this information helpful?

Yes

Comments

How to change the default comparison operator of the filter bar.

Access denied