Articles in this section
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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied