Customizing filter menu operators list

17 Feb 20221 minute to read

You can customize the default filter operator list by defining the operators property of e-grid-filterSettings tag helper.

The available options are:

• stringOperator- defines customized string operator list.
• numberOperator - defines customized number operator list.
• dateOperator - defines customized date operator list.
• booleanOperator - defines customized boolean operator list.

In the following sample, we have customized string filter operators.

CSHTML

@{
    List<object> operators = new List<object>();
    operators.Add(new { value = "startswith", text = "starts with" });
    operators.Add(new { value = "endswith", text = "ends with" });
    operators.Add(new { value = "contains", text = "contains" });
}


<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true">
    <e-grid-filterSettings type="Menu" operators="@(new { stringOperator = operators })"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

Customize-filter-menu.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}