Filter Menu in ASP.NET CORE Tree Grid Component

21 Dec 20227 minutes to read

You can enable filter menu by setting the type 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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Menu"></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" textAlign="Right" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

NOTE

Custom component in filter menu

The filter property of e-treegrid-column tag helper is used to add custom filter components to a particular column. To implement custom filter ui, define the following functions:

  • create: Creates custom component.
  • write: Wire events for custom component.
  • read: Read the filter value from custom component.

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

@{
    var filteruiTemplate = new
    {
        ui = new
        {
            create = "create",
            write = "write",
            read = "read"
        }
    };
}

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Menu"></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" textAlign="Right" filter="@(filteruiTemplate)" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    var dd = document.createElement("input");
    dd.setAttribute('id', 'Duration');
    function create(args) {
        var dataSource = ['All', '1', '3', '4', '5', '6', '8', '9', '11', '12'];
        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);
                }
            }
        });
        var input = ejs.base.createElement('input', { id: 'Duration' });
        args.target.prepend(input)
        dd.appendTo(args.target.querySelector('#Duration'));
    }
    function write(args) {
        dd.value = args.filteredValue;
    }
    function read(args) {
        args.fltrObj.filterByColumn(args.column.field, args.operator, parseInt(dd.value));
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

Enable different filter dialog for a column

You can use both Menu and Excel filter in a same TreeGrid. To do so, set the type as Menu or Excel using filter property of e-treegrid-column tag helper.

In the following sample menu filter is enabled by default and excel filter is enabled for the Task Name column using the filter property of e-treegrid-column tag helper.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Menu"></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" filter="@(new { type="Excel"})"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="90"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public ActionResult 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.