Filter Bar

16 Mar 20239 minutes to read

By setting the allowFiltering to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type.

Filter bar expressions:

You can enter the following filter expressions (operators) manually in the filter bar.

Expression  Example  Description  Column Type
=  =value  equal  Number
!=  !=value  notequal  Number
>  >value  greaterthan  Number
<  <value  lessthan  Number
>=  >=value  greaterthanorequal  Number
<= <=value lessthanorequal  Number
*  *value  startswith  String
%  %value  endswith  String
N/A  N/A  equal operator will always be used for date filter.  Date
N/A  N/A  equal operator will always be used for Boolean filter.  Boolean 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Filter bar template with custom component

The filterBarTemplate of e-grid-column is used to add a custom component for a particular column and this contains the following functions.

  • create – It is used for creating custom components.
  • read – It is used to read the Filter value selected.
  • write - It is used to wire events for custom components.

In the following sample dropdown is used as custom component in EmployeeID column.

@{
        Object filterTemplate = new Object();
        filterTemplate = (new { read = "read", write = "write" });
    }

    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowFiltering="true">
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="EmployeeID" headerText="Employee ID" filterBarTemplate="filterTemplate" width="150"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
            <e-grid-column field="ShipCity" headerText="Ship City" width="170"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>

    <script type="text/javascript">
        function write(args) {
            var data = [{ text: "clear", value: "clear" }, { text: "1", value: 1 }, { text: "2", value: 2 }, { text: "3", value: 3 }, { text: "4", value: 4 },
            { text: "5", value: 5 }, { text: "6", value: 6 }, { text: "7", value: 7 }, { text: "8", value: 8 }, { text: "9", value: 9 }
            ]
            var listObj = new ej.dropdowns.DropDownList({
                dataSource: data,
                placeholder: 'Select EmployeeID',
                change: function () { read(args) }
            });
            listObj.appendTo(args.element);
        }
        function read(args) {
            var grid = document.getElementById("Grid").ej2_instances[0]
            if (args.element.value == "clear") {
                grid.clearFiltering(args.column.field);
                args.element.value = ""
            } else {
                grid.filterByColumn(args.column.field, "equal", parseInt(args.element.value))
            }
        }
    </script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Change default filterbar operator

You can change the default filter operator by extending filterOperators property in dataBound event. In the following sample, we have changed the default operator for string typed columns as contains from startsWith.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound" allowFiltering="true" >
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID"  textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Shio City"   width="100"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function dataBound(){
        var gridObj = document.getElementById('Grid')['ej2_instances'][0];
        Object.assign(gridObj.filterModule.filterOperators, { startsWith: 'contains' });
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

See also