ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Filtering in ASP.NET Core Grid control

30 Jul 2021 / 4 minutes to read

Filtering allows you to view particular records based on filter criteria. To enable filtering in the Grid, set the allowFiltering to true. Filtering options can be configured through e-grid-filterSettings tag helper.

tagHelper
filter.cs
Copied to clipboard
<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="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>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}
  • You can apply and clear filtering by using filterByColumn and clearFiltering methods.
  • To disable filtering for a particular column, set allowFiltering property of e-grid-column as false.

Initial filter

To apply the filter at initial rendering, set the filter Predicate object in columns property of e-grid-filterSettings tag helper.

tagHelper
initialfilter.cs
Copied to clipboard
@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "ShipCity", matchCase = false, @operator = "startswith", predicate = "and", value = "Berlin" });
    filterColumns.Add(new { field = "ShipName", matchCase = false, @operator = "startswith", predicate = "and", value = "Simons bistro" });
   }
   
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" height="273">
        <e-grid-filterSettings columns="filterColumns"></e-grid-filterSettings>
        <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>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Filter operators

The filter operator for a column can be defined in the operator in columns property of e-grid-filterSettings tag helper.

The available operators and its supported data types are:

Operator  Description  Supported Types
startswith  Checks whether the value begins with the specified value.  String
endswith  Checks whether the value ends with the specified value.  String
contains  Checks whether the value contains the specified value.  String
equal  Checks whether the value is equal to the specified value.  String | Number | Boolean | Date
notequal  Checks for values not equal to the specified value.  String | Number | Boolean | Date
greaterthan  Checks whether the value is greater than the specified value.  Number | Date
greaterthanorequal Checks whether a value is greater than or equal to the specified value.  Number | Date
lessthan  Checks whether the value is less than the specified value.  Number | Date
lessthanorequal  Checks whether the value is less than or equal to the specified value.  Number | Date

By default, the operator value is equal in columns property of e-grid-filterSettings tag helper.

Filter bar

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
tagHelper
filter-bar.cs
Copied to clipboard
<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>
Copied to clipboard
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.

tagHelper
filterbartemplate.cs
Copied to clipboard
@{
        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>
Copied to clipboard
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.

tagHelper
filter.cs
Copied to clipboard
<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>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Filter menu

You can enable filter menu by setting the type of e-grid-filterSettings as Menu. The filter menu UI will be rendered based on its column type, which allows you to filter data. You can filter the records with different operators.

tagHelper
filtermenu.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true">
    <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
    <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>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}
  • allowFiltering must be set as true to enable filter menu.
  • Setting allowFiltering property of e-grid-column as false will prevent filter menu rendering for a particular column.

Enable different filter for a column

You can use both Menu and CheckBox filter in a same Grid. To do so, set the type as Menu in e-grid-filterSettings and CheckBox in filter property of e-grid-column tag helper.

In the following sample menu filter is enabled by default and checkbox filter is enabled for the CustomerID column using the filter property of e-grid-column tag helper.

tagHelper
diffcolumnfilter.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" height="273">
    <e-grid-filterSettings type="Menu"></e-grid-filterSettings>
    <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"  filter="@(new { type="CheckBox"})" 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>
Copied to clipboard
public IActionResult Index()
 {
    if (orders.Count() == 0)
        DataSource();
    ViewBag.DataSource = orders;            
    return View();
 }

 public void DataSource()
 {
    int code = 10000;
    for (int i = 1; i < 10; i++)
    {
        orders.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
        orders.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
        orders.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
        orders.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
        orders.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
        code += 5;
    }
}

Excel like filter

You can enable Excel like filter by defining. type as Excel.The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.

tagHelper
excelfilter.cs
Copied to clipboard
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true" height="273">
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <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>
Copied to clipboard
public IActionResult Index()
 {
    if (orders.Count() == 0)
        DataSource();
    ViewBag.DataSource = orders;            
    return View();
 }

 public void DataSource()
 {
    int code = 10000;
    for (int i = 1; i < 10; i++)
    {
        orders.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
        orders.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
        orders.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
        orders.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
        orders.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
        code += 5;
    }
 }

See also

Previous
Next