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.
<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 ofe-treegrid-column
tag helper to false.
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.
<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();
}
To apply the filter at initial rendering, set the filter Predicate object in
columns
property of e-treegrid-filterSettings
tag helper.
@{
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();
}
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.
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();
}
The filterBarTemplate
is used to add custom components to a particular column, and does the following functions:
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();
}
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();
}
allowFiltering
must be set as true to enable filter menu.- Setting
allowFiltering
property ofe-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:
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();
}
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();
}
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.
<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();
}
You can change the default excel-filter operator by changing the column operator as contains
from startsWith
in the actionBegin
event.
<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();
}