TreeList - Filter Out Child Nodes

1 Answer 69 Views
Filter TreeList
Top achievements
Rank 1
Sean asked on 28 Jul 2023, 02:17 AM

I've had a look and haven't found anything that answers my specific need.

I have an app that has a bill of materials and an order. 

Bill of materials is a self referencing hirarchy of parts e.g.

  • Widget 1
    • Assembly 1
      • screw type 9
      • ring type A
      • spring type 6
    • Assembly 2
      • doodah X
        • Bit 9
      • Thinkgy 33
  • Widget 2
    • etc

If Assembly 1 gets added to an order then it should no longer be visible as an option in the bill of materials (nor should anything under it). Or if doodah X gets added then it and its child should no longer be visible. This is obviously a very simplified example to demonstrate the need.

Is there a way to filter out the child nodes of a treelist like this?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 01 Aug 2023, 03:23 PM

Hi Sean,

I have some suggestions regarding your desired behavior. 

In the case that you want to filter the data items and their children by removing them from the dataSource, I would suggest using the remove() method after finding the corresponding item:

click: function(e) {
   var tr = $("tr"); 
   var dataItem = this.dataItem(tr);

Here is a Dojo, which illustrates the mentioned approach:

On the other hand, if you want to just hide the nodes, without removing them from the dataSource, I would recommend using a recursive function to find the children of the certain data item and then hiding them:

function hideNodes(node, parentID){
            var allItems = $("#treelist").data('kendoTreeList').dataSource.view();

            for(var i=0; i < allItems.length; i++){
              var currentDataItem = $("#treelist").data('kendoTreeList').dataItem(allItems[i]);

              if(currentDataItem.ReportsTo == node.EmployeeId){                
                $($("#treelist").data('kendoTreeList').itemFor(currentDataItem)).css('color', 'red');

                  hideNodes(currentDataItem, node.EmployeeId);

For a better understanding, you can find a Dojo example below, using the mentioned function: 

Note that in the last Dojo, the data items are colored in red, instead of being hidden, for a better observation of the method.

Hope that the proposed suggestions would be helpful in your scenario.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Top achievements
Rank 1
commented on 01 Aug 2023, 10:21 PM

Awesome! I'll go try that out.
Filter TreeList
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question