TreeView selection node is too stuck

[? ??]

I have a question about selecting nodes in TreeView and would like to consult：

1.Why the selected node code must be placed in setTimeout to take effect.

2.When selects nodes by "checkAll" or using "checkNodes" binds nodes that need to be selected, the browser will stuck. But using the checkAll method without parameters responds quickly

      setTimeout(() => {

        // console.log('checkNodes', checkNodes);

        this.defaultCheckedNodes = checkNodes;

        // this.$refs.treeView.checkAll();

        // this.$refs.treeView.checkAll(checkNodes);

        // this.$refs.treeView.checkAll(checkNodes.slice(1, 100));

      });

Please refer to the attachment for the complete sample code

Attachment: test_4fcd6914.zip

[LeoLavanya Dhanaraj]

Hi Customer,

Greetings from Syncfusion support.

Query : Why the selected node code must be placed in setTimeout to take effect.

We were unable to run your shared sample. However, we have validated your reported query by preparing the TreeView sample to match your shared sample.

You updated the new datasource and then mapped the checked nodes inside a button click. As a result, it takes a feasible amount of time to render the component with the updated details. If this is not suitable for your application, you can directly map the isChecked property to the updated datasource.

Issue : When selects nodes by "checkAll" or using "checkNodes" binds nodes that need to be selected, the browser will stuck. 

Based on the details provided, we have validated the mentioned issue in the TreeView component. The checkAll method works properly both with and without passing the parameter. For your reference, we have included the validated sample.

Sample : https://codesandbox.io/s/treeview-datasource-change-forked-8m5n49?file=/src/components/Treeview.vue

Regards,

Leo Lavanya Dhanaraj

[bingxueyinlian]

There is no problem when the amount of data is small, but it will be stuck when the amount of data is large (more than 2000).

 Directly map the isChecked property to the updated datasource is OK，Thanks!

[LeoLavanya Dhanaraj]

Thank you for providing the details. However, we require further information to validate the TreeView performance issue. Have you rendered the 2000 nodes as only parent nodes or are there child nodes as well? If there are child nodes, how many nodes are rendered inside each parent node? This is important as the checkAll method checks both parent and child nodes. For that only, it takes the feasible amount of time to check the component. If possible, please share a performance issue sample along with its execution time. This will help us validate the issue and provide a prompt solution.

Additionally, we recommend using the isChecked property for the TreeView component datasource to improve performance at your end.