Filter Bar in ASP.NET CORE Tree Grid Component

21 Dec 20228 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-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true" allowPaging="true">
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Filter bar template with custom component

The filterBarTemplate is used to add custom components to a particular column, and does the following functions:

  • create: Creates custom components.
  • write: Wires events for custom components.

In the following sample, the dropdown is used as a custom component in the Duration column.

@{
    var filterTemplate = new
    {
        create = "create",
        write = "write"
    };
}

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="FilterBar" hierarchyMode="Parent" mode="Immediate"></e-treegrid-filtersettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="80"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" type="date" width="100"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" filterBarTemplate="@(filterTemplate)" textAlign="Right" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    function create(args) {
        var dd = document.createElement("input");
        dd.id = "Duration";
        return dd;
    }
    function write(args) {
        var dataSource = ['All', '1', '3', '4', '5', '6', '8', '9', '11', '12'];
        var dd = new ej.dropdowns.DropDownList({
            dataSource: dataSource,
            value: 'All',
            change: function (e) {
                var valuenum = +e.value;
                var id = this.element.id;
                var value = e.value;
                var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
                if (value !== 'All') {
                    treegrid.filterByColumn(id, 'equal', valuenum);
                } else {
                    treegrid.removeFilteredColsByField(id);
                }
            }
        });
        dd.appendTo("#Duration");
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

Change default filter bar operator

You can change the default filter operator by extending filterModule.filterOperators property in dataBound event.

In the following sample, we have changed the default operator for string typed columns as contains from startsWith.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" dataBound="dataBound" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true" allowPaging="true">
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
  function dataBound(args){
  var treegrid = document.getElementsByClassName("e-treegrid")[0].ej2_instances[0]
  Object.assign(this.treegrid.grid.filterModule.filterOperators, { startsWith: 'contains' });
  }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.