how to highlight search text in treeview

[Frederik Gysel]

Dear,

Reffering to: https://ej2.syncfusion.com/javascript/documentation/treeview/how-to/filtering-tree-nodes/

Question: would you have an example of how to highlight the search text in the treeview?

Thx

Frederik

[LeoLavanya Dhanaraj]

Hi Frederik,

Greetings from Syncfusion support.

From the explanation, we understand that you want to highlight the filtered text of the TreeView nodes. We have achieved your requirement by implementing the below code changes.

[index.js]

//Filtering the TreeNodes

function searchNodes(args) {

  ...

  setTimeout(function (this) {

    listTreeObj.expandAll();

    for (var i = 0; i < proxy.array_value.length; i++) {

      var node = document

        .querySelector('[data-uid="' + proxy.array_value[i] + '"]')

        .querySelector('.e-list-text');

      var regEx = new RegExp(_text, 'ig');

      node.innerHTML = (node).innerText.replace(

        regEx,

        '<b>$&</b>'

      );

    }

  }, 100);

}

Sample : https://stackblitz.com/edit/ihty1k-cia85w?file=index.js,index.html

Check out the shared sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Frederik Gysel]

Thanks for the reply.

I will further need to check your suggestion.
What i noticed is that performance is very poor on large datasource

Rgds

Frederik

[Prasanth Madhaiyan]

Hi Frederik,

We have validated your reported query in the TreeView component and understand that you are facing a performance issue when rendering the large date at your end. In the TreeView component, since filtering is achieved through customization, the resulting nodes will be rendered in a feasible time.

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.