ASP.NET Core

Search results

Filtering in ASP.NET Core Tree Grid control

30 Jul 2021 / 5 minutes to read

Filtering allows you to view specific or related records based on filter criteria. To enable filtering in the TreeGrid, set the allowFiltering to true. Filtering options can be configured through e-treegrid-filtersettings tag helper.

tagHelper

defaultFiltering.cs

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

You can apply and clear filtering by using filterByColumn and clearFiltering methods. To disable filtering for a particular column, set allowFiltering property of e-treegrid-column tag helper to false.

Filter Hierarchy Modes

TreeGrid provides support for a set of filtering modes with hierarchyMode property of e-treegrid-filterSettings tag helper. The below are the type of filter mode available in TreeGrid.

Parent : This is the default filter hierarchy mode in TreeGrid. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered records only displayed.
Child : The filtered records are displayed with its child record, if the filtered records not have any child record then the filtered records only displayed.
Both : The filtered records are displayed with its both parent and child record, if the filtered records not have any parent and child record then the filtered records only displayed.
None : The filtered records are only displayed.

tagHelper

filterModes.cs

<ejs-dropdownlist id="mode" dataSource="@ViewBag.dropdata" placeholder="Select a Mode" change="onModeChange" index="0" popupHeight="220px">
    <e-dropdownlist-fields text="mode" value="id"></e-dropdownlist-fields>
</ejs-dropdownlist>

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="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 onModeChange(e) {
        var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
        var mode = e.value;
        treegrid.filterSettings.hierarchyMode = mode;
        treegrid.clearFiltering();
    }
</script>

public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    ViewBag.dropdata = new List<object>() {
        new { id= "Parent", mode= "Parent" },
        new { id= "Child", mode= "Child" },
        new { id= "Both", mode= "Both" },
        new { id= "None", mode= "None" },
    };
    return View();
}

Initial filter

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

tagHelper

initialFilter.cs

@{
    List<object> filterColumns = new List<object>();
    filterColumns.Add(new { field = "TaskName", matchCase = false, @operator = "startswith", predicate = "and", value = "plan" });
    filterColumns.Add(new { field = "Duration", matchCase = false, @operator = "equal", predicate = "and", value = 5 });
}

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1" allowFiltering="true">
    <e-treegrid-filterSettings columns="filterColumns"></e-treegrid-filterSettings>
    <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 operators

The filter operator for a column can be defined in the operators property of e-treegrid-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 operators value is equal.

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

defaultFiltering.cs

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

tagHelper

uiTemplate.cs

@{
    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.

tagHelper

default-filter-operator.cs

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

allowFiltering must be set as true to enable filter menu.

Setting allowFiltering property of e-treegrid-column tag helper as false will prevent filter menu rendering for a particular column.

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.

tagHelper

filterMenuUI.cs

@{
    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 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.

tagHelper

diffcolumnfilter.cs

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

Excel like filter

You can enable Excel like filter by defining. type as Excel using e-treegrid-filterSettings tag helper .The excel menu contains an option such as Sorting, Clear filter, Sub menu for advanced filtering.

tagHelper

excelfilter.cs

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

Change default Excel filter Operator

You can change the default excel-filter operator by changing the column operator as contains from startsWith in the actionBegin event.

tagHelper

excelfilter-default-operator.cs

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" actionBegin="actionBegin" allowFiltering="true" height="275" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-filtersettings type="Excel"></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="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>

<script>
  function actionBegin(args){
  if(args.requestType === 'filtersearchbegin' && args.column.type === "string"){
  args.operator = 'contains';
  }
  }
</script>

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.dataSource = tree;
    return View();
}

Contents

Filter Hierarchy Modes
Initial filter
Filter operators
Filter bar
Filter bar template with custom component
Change default Filter Bar Operator
Filter menu
Custom component in filter menu
Enable different filter for a column
Excel like filter
Change default Excel filter Operator

Contents

Filter Hierarchy Modes
Initial filter
Filter operators
Filter bar
Filter bar template with custom component
Change default Filter Bar Operator
Filter menu
Custom component in filter menu
Enable different filter for a column
Excel like filter
Change default Excel filter Operator

Filtering in ASP.NET Core Tree Grid control

Filter Hierarchy Modes

Initial filter

Filter operators

Filter bar

Filter bar template with custom component

Change default Filter Bar Operator

Custom component in filter menu

Enable different filter for a column

Excel like filter

Change default Excel filter Operator