Category / Section
How to filter the tree nodes in TreeView?
1 min read
You can filter the tree nodes based on their text using the ‘DataManager’ plugin and the ‘fields’ property of TreeView.
The following code example demonstrates how to filter the tree nodes in TreeView.
// Render the TreeView with list data source var listTreeObj = new ej.navigations.TreeView({ fields: { dataSource: localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', expanded: "expanded" }, }); listTreeObj.appendTo('#treeView'); // Render the MaskedTextBox input element var mask = new ej.inputs.MaskedTextBox({ placeholder: "Enter the tree node to search", change: searchNodes }); mask.appendTo('#mask'); // Change the dataSource for TreeView function changeDataSource(data) { listTreeObj.fields = { dataSource: data, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' } } // Filtering the tree nodes function searchNodes(args) { var _text = mask.element.value; var predicats = [], _array = [], _filter = []; if (_text == "") { changeDataSource(localData); } else { var predicate = new ej.data.Predicate('name', 'contains', _text, true); var filteredList = new ej.data.DataManager(localData).executeLocal(new ej.data.Query().where(predicate)); for (var j = 0; j < filteredList.length; j++) { _filter.push(filteredList[j]["id"]); var filters = getFilterItems(filteredList[j], localData); for (var i = 0; i < filters.length; i++) { if (_array.indexOf(filters[i]) == -1 && filters[i] != null) { _array.push(filters[i]); predicats.push(new ej.data.Predicate('id', 'equal', filters[i], false)); } } } if (predicats.length == 0) { changeDataSource([]); } else { var query = new ej.data.Query().where(new ej.data.Predicate.or(predicats)); var newList = new ej.data.DataManager(localData).executeLocal(query); changeDataSource(newList); setTimeout(function () { listTreeObj.expandAll(); }, 100); } } } // Find the parent nodes for corresponding childs function getFilterItems(fList, list) { var nodes = []; nodes.push(fList["id"]); var query2 = new ej.data.Query().where('id', 'equal', fList["pid"], false); var fList1 = new ej.data.DataManager(list).executeLocal(query2); if (fList1.length != 0) { var pNode = getFilterItems(fList1[0], list); for (var i = 0; i < pNode.length; i++) { if (nodes.indexOf(pNode[i]) == -1 && pNode[i] != null) nodes.push(pNode[i]); } return nodes; } return nodes; }
Sample: https://stackblitz.com/edit/4s6ddu-hlz4dz?file=index.js