Checkboxes rendering different value than fields have

[Miloš Musílek]

Hello,

I am trying to use TreeView component to check nodes. Even though my model is correct, tree shows different values. In my code there is hardcoded tree values, the behavior is the same when I'm updating state async on expand. Logged dataSource shows correct values. 
Problem is visible with these two examples:

• Click multiple times on 257-3 and 260-3 will check as well.
• When all children of 260-3 are checked, 257-3 will check as well.

Attachment: treecheckboxproblem_e6ec77a7.zip

[LeoLavanya Dhanaraj]

Hi Milos,

Greetings from Syncfusion support.

Based on the information provided, we understand that you are facing an issue with the rendering of checkboxes in the React TreeView and with the field values. We were able to run the provided sample, but we are unclear about your exact issue and the customizations involved.

Would you like to dynamically update the `checkedNodes` property or the `isChecked` field of the nodes within the node checking event? To replicate your exact issue and identify the root cause, we need your specific requirements and the steps to reproduce the issue in your sample. Could you please share the steps for reproducing the issue in the form of a video? Thank you.

We appreciate your cooperation in providing these details, as they will greatly assist us in diagnosing the problem and delivering a prompt solution.

Regards,

Leo Lavanya Dhanaraj

[Miloš Musílek]

Hi Leo,

the whole tree is updated from nodes and therefore I want to dynamically update isChecked field. In my updated code there is state of checked visible and it is correct. Also in the zip file there is video/gif reproducing my problem. 

In my first example code I was using data from event and I think I used it wrongly, sorry. This time I'm certain the state change is correct.

BR,

Miloš

Attachment: treecheckboxproblem_726ba790.zip

[LeoLavanya Dhanaraj]

Hi Milos,

We apologize for any inconvenience may have caused and appreciate your patience.

Upon further validation with the sample you provided, we found that the issue occurs from the customization of dynamically updating the dataSource in the UI within the nodeChecking event. We confirmed that you are canceling our default nodeChecking behavior by setting args.cancel to true.

Additionally, we would like to inform you that, by default, the TreeView component has the autoCheck property set to true. This automatically checks or unchecks child nodes when a parent node is checked or unchecked (and vice versa). In your customization, this behavior has not been taken into account. By setting the autoCheck property to false, you can resolve the two issues you mentioned.

Please check this on your end as well. If you are still experiencing any issues, kindly share your exact requirements and the use case scenario. This information will help us validate your needs regarding the component and provide a suitable solution.

Regards,

Leo Lavanya Dhanaraj

[Miloš Musílek]

Hi Leo,

Setting the autoCheck property to false did the trick. It looks like the tree is not fully controlled by the dynamic state for the check state of nodes. In my opinion the correct way would be to prioritize state from fields over tree's inner state.

BR,

Miloš

[LeoLavanya Dhanaraj]

Hi Milos,

Yes, you can manage the tree state in the TreeView component through the `fields` property. Here, we have provided an example of changing the entire data source, where the `isChecked` value can be set to true and false on the initial rendering. We used React's `useState` hook to manage the data state.

Sample : https://stackblitz.com/edit/react-vawgu7yy-n9j3ks1k?file=index.js,index.html