Search results

Customizing filter menu operators list

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.

tagHelper
customize-filter-menu.cs
@{
    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>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}