Category / Section
How to enable filtering in TreeGrid
1 min read
In TreeGrid, we can filter the required records by using allowFiltering property. Filtering can be performed by filterbar or menu filter type mode. We can also enable/disable the filter option for specific column by using columns.allowFiltering property.
Please find the code example below:
<div id="TreeGridContainer" style="width: 100%; height: 450px;"></div>
$("#TreeGridContainer").ejTreeGrid({
allowFiltering: true,
//For Menu Mode
filterSettings: { filterType: ej.TreeGrid.FilterType.Menu },
//For Filterbar Mode
filterSettings: { filterType: ej.TreeGrid.FilterType.FilterBar },
columns: [
{ field: "taskID", headerText: "Task Id", allowFiltering: false, filterEditType: "numericedit" }]
})
The following output is displayed for FilterBar filter type mode
Please find the following output for Menu filter type mode
We can also filter records during load time by using filterSettings.filteredColumns property.
Please find the code example below
<div id="TreeGridContainer" style="width: 100%; height: 450px;"></div>
$("#TreeGridContainer").ejTreeGrid({
allowFiltering: true,
isResponsive: true,
filterSettings: {
filterType: ej.TreeGrid.FilterType.FilterBar,
filteredColumns: [{
value: "plan",
field: "taskName",
operator: "startswith"
}]
}
})
Please find the sample to perform filtering in TreeGrid
