Access e-list-item element based on tree node data

[Jonas Czeslik]

Hello Syncfusion team, 

I am struggling with a feature, I want to implement for Syncfusion TreeView. 
My tree nodes should have a type in its data that decides, which template I am using for this node. I also want to use this type to find out, if tree nodes should be underlayed with a chess pattern (darker, lighter background of a row). 

In short, I want to access all e-list-item elements that have a child with the chess - type in its tree data and give them an additional class.

Please refer to the following Stackblitz that shows my problem. In the app.component.html, you can find a description of the problem at the according point.

https://stackblitz.com/edit/ejs-tree-2-7kusop?file=src/app/app.component.html

It mainly is a DOM traversal problem and I don't know how I can access the specific e-list-item parents that I want to address in an elegant way. 

It is not enough to work with the item level of the tree because our trees are pretty generic and rearrangable, so there is not specific and constant tree level that addresses the right rows.

Can you help out here?

Thanks in regard
Jonas

[Indhumathy Loganathan]

Hi Jonas,

Greetings from Syncfusion support.

We have validated your requirement in the shared sample. We understand that you are using Hierarchical data source. Currently, DataManager only has support for filtering the first level of the tree nodes and doesn’t support filtering of hierarchical data sources. So this can be achieved only through datasource looping. Please check the customized code below.

[app.component.html]

<ejs-treeview

  #TreeView

  id="template"

  #tree

  [fields]="field"

  [loadOnDemand]="false"

> 

[app.component.ts]

  onClick(args) {

    var value = 'chess';

    this.matchedChildren = [];

    for (let i = 0; i < (this.treeObj.fields.dataSource as any).length; i++) {

      //Get the corresponding node in the TreeView.

      this.nestedChildFilter(value, this.treeObj.fields.dataSource[i]);

    }

    //Printed all node data.

    console.log(this.matchedChildren);

    for (let i = 0; i < this.matchedChildren.length; i++) {

      //Printed all DOM elements.

      console.log(

        document.querySelector(

          "[data-uid='" + this.matchedChildren[0].id + "']"

        )

      );

    }

  }

  nestedChildFilter(value, node) {

    // If the child node contain children

    let children = node[this.treeObj.fields.child as any];

    if (children == null) {

      return this.isMatchedNode(value, node) ? node : null;

    } else {

      for (let i = 0; i < children.length; i++) {

        // You can again search the child node of TreeView component.

        let filteredChild = this.nestedChildFilter(value, children[i]);

        if (filteredChild !== null && filteredChild.type == value) {

          this.matchedChildren.push(filteredChild);

        }

      }

      if (this.matchedChildren.length !== 0) {

        return node;

      } else {

        node[this.treeObj.fields.child as any] = null;

        return this.isMatchedNode(value, node) ? node : null;

      }

    }

  }

  isMatchedNode(value, node) {

    //Return matched values

    let checkValue = node[(this.treeObj.fields as any).type];

    checkValue = checkValue.toLowerCase();

    if (!isNOU(value)) {

      value = value.toLowerCase();

    }

    return checkValue.indexOf(value) !== -1;

  }

In the sample, we have set the loadOnDemand property as false to retrieve the DOM elements. You can able to see all the elements in the console on the button click.

https://stackblitz.com/edit/angular-ntcbm2-6kavxs?file=app.component.ts,app.component.html

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L