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 FilterSettings.

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" });
}

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

}).AllowFiltering().AllowPaging().FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu).Operators(new { stringOperator = operators }); }).Render()

Customize-filter-menu.cs

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