1. Home
  2. Forum
  3. React - EJ 2
  4. TreeView: Pre-Check checkboxes using props is not working as expected.

TreeView: Pre-Check checkboxes using props is not working as expected.

Hello,
         I am new to syncFusion infact I am newbie to ReactJS only. I am using syncfusion's treeview.

 My requirement is to load a checkbox tree and pre-check(check initially while loading) few checkboxes. So I am using treeview's checkedNodes property to do this. I get the list of ids of all checkboxes from props. Tree loads fine with all the checkboxes preselected. I am also binding nodeChecked event to print the list of all checked checkeboxes. I use this.treeView.getAllCheckedNodes() function to get the list of checkedNodes.

Now, My problem is that if I check/unchek some or all checkboxes the UI gets updated but this.treeView.getAllCheckedNodes()  always returns prechecked checkboxes list only which I assign to checkedNodes while loading the treeview. Why so? I want getAllCheckedNodes()
 to return actual checked checkboxes on the treeview. How can I achieve this?
Below is the code snippet. 

class FncTree extends Component {
constructor(props) {
super(props);
}
this.state = {
nodes: [],
}
this.fields = {}

getTestTreeSkeleton = () => {
fetch(
"http://xxxxxx.som.url.togetthe.skeletonof.checkboxtree
)
.then(response => response.json())
.then(json => {
this.fields = {
dataSource: json.skeleton,
id: "id",
parentID: "pid",
text: "name",
hasChildren: "hasChild"
};
this.setState({
nodes: json.skeleton
});
});
};

componentDidMount() {
this.getTestTreeSkeleton();
}

nodeChecked = () => {
let checkedNodes = this.treeView.getAllCheckedNodes().sort();
console.log(checkedNodes );
}
createdCall= () => {
let checkedNodes = this.treeView.getAllCheckedNodes().sort();
console.log(checkedNodes );
}



render() {
console.log("this.state.selectedFncs : ", this.state.selectedFncs);
return (
<React.Fragment>
{this.state.nodes.length > 0 ? (
<TreeViewComponent
fields={this.fields}
showCheckBox={true}
created={this.createdCall}
nodeChecked={this.nodeChecked}
checkedNodes={this.props.preSelectedCheckboxes}
ref={treeView => (this.treeView = treeView)}
cssClass="custom-treeview"
/>
) : (
<div className="loader-gif-container">
<img
className="loader-gif"
src={process.env.PUBLIC_URL + "/loaderSmall.gif"}
/>
</div>
)}
</React.Fragment>
);
}




}




6 Replies
MK Muthukrishnan Kandasamy Syncfusion Team September 25, 2020 10:29 AM UTC

 
Hi Suraj, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your reported problem in Syncfusion React TreeView component. We were unable to reproduce your reported problem in our end. We have prepared sample to meet your requirement, in this sample we have initially checked some nodes in TreeView component by using checkedNodes property. In nodeChecked event we get the updated checked nodes details of TreeView component. 
 
Please refer to the below link for the sample. 
 
 
 
 
 
If you still face the same issue, please share the issue replicating sample or else replicate the issue in the shared sample and provide us more details regarding the problem. It would help us to provide you the prompt solution for resolving your problem. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


SU suraj September 27, 2020 04:49 PM UTC

Muthukrishnan,

        Thanks a ton for your reply. The sample project you provided really helped me to debug the issue. I just got to know what wrong thing  I was doing in my script. 
If checkedNodes variable array consists of any wrong id(s) which doesn't exist in TreeView, Then array of ids return by getAllCheckedNodes() will always have wrong ids. The right ids are getting added and deleted properly.

I got to know that this is fault from my side But I still don't know if this is expected behaviour of getAllCheckedNodes. I thought getAllCheckedNodes will always return the values of checkboxes looking at the value in UI.

To reproduce the issue, All we need to do is to add some wrong ids to checkedNodes array while creating. 

I edited the sample project you provided. I changed value of checkedNodes to this.checkedNodes = ["22","23"];. Now, If I check any checkbox in  the UI, getAllCheckedNodes() returns newly checked ids plus [22,23]. If I uncheck all checkboxes then the returned value would be just ["22","23"].

Please let me know if this expected behaviour of getAllCheckedNodes().


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 28, 2020 02:20 PM UTC

Hi Suraj, 
 
We were able to replicate your reported issue and we have considered your reported issue as a bug in TreeView component. We will include the fix for this issue in Volume 3 SP release which is expected to be rolled out by the end of October 2020. 
 
You can track the status of this issue fix using the following feedback link. 
 
  
We appreciate your patience. 
 
Regards, 
Shameer Ali Baig S. 


SU suraj September 29, 2020 06:12 AM UTC

Thanks Shameer. Looking forward for the fix.

MK Muthukrishnan Kandasamy Syncfusion Team September 29, 2020 10:37 AM UTC

 
Hi Suraj, 
 
Thanks for the update. 
 
Once we included the fix for your reported problem, we’ll update to you. 
 
We appreciate your patience until then. 
 
Regards, 
Muthukrishnan K 


SP Sowmiya Padmanaban Syncfusion Team November 3, 2020 02:08 PM UTC

Hi Suraj,  
 
We regret for the inconvenience. 
 
Due to some technical difficulties, we were unable to include this fix in Volume 3 SP1 release, 2020. We are working on this issue with high priority. 
  
We will include this fix in Volume 4 release which is expected to be rolled out by the end of December 2020. 
  
We appreciate your patience. 
  
Regards, 
Sowmiya P. 


Loader.
Up arrow icon