TreeList - Filter Out Child Nodes

[Sean]

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?

[Zornitsa]

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 = $(e.target).closest("tr"); 
   var dataItem = this.dataItem(tr);
   this.dataSource.remove(dataItem);		
}

Here is a Dojo, which illustrates the mentioned approach:

• https://dojo.telerik.com/OmAxUMUS 

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');
                //$(e.sender.itemFor(dataItem)).hide();

                if(currentDataItem.hasChildren){
                  hideNodes(currentDataItem, node.EmployeeId);
                }
              }
            }
          }

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

• https://dojo.telerik.com/IYisuhoH 

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.

Regards,
Zornitsa
Progress Telerik

[Sean]

Awesome! I'll go try that out.