We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

search child node and select will make the parent selected and make all of its child nodes selected.

Thread ID:

Created:

Updated:

Platform:

Replies:

148574 Oct 25,2019 09:46 AM UTC Oct 29,2019 10:18 AM UTC Angular - EJ 2 3
loading
Tags: Treeview
Sebastian Jonathan
Asked On October 25, 2019 09:46 AM UTC

Hi,
I hope you're doing well. I have a problem if you search the child nodes and you select the child. It will select the parent node also which makes all of its child nodes selected. for example :
dataSource : [
     {id:'123',name:'parent 1',hasChild:true},
     {id:'123-1',pid:'123',name:'child 1'},
     {id:'123-2', pid:'123',name:'daughter'}
];
when you search daughter, the tree will view :
    parent 1
            daughter
if you select the daughter, the parent 1 checkbox will be checked. It should be minus and only select daughter, if you make parent 1 checkbox checked, it will select parent 1, child 1, and daughter.
could you please help me fix this problem? thank you.

Best regards,
Sebastian

Kanagambigai Murugan [Syncfusion]
Replied On October 28, 2019 07:25 AM UTC

Hi Sebastian, 
  
Thanks for contacting Syncfusion. 
  
We have validated the reported scenario at our end. By default, the parent will be in the checked state while selecting its child nodes when filtering with a single child. So upon clearing the search results, based on the parent state(checked), its corresponding children also go to checked state. This is the default behavior of our TreeView. However, you can achieve your requirement by disabling the loadOnDemand property. While doing so, the parent will go to the intermediate state after clearing the selection. Please refer to the following code snippet. 
  
default.html  
<ejs-treeview #treeviewObj id="default" [loadOnDemand]=false [showCheckBox]=true [fields]='field' (dataBound)="dataBounded($event)" (nodeChecked)="nodeCheck($event)">  
  
default.components.ts  
  
//Change the dataSource for TreeView  
  changeDataSource(data) {  
    for (let i = 0; i < data.length; i++) {  
      let dataId = data[i]["uuid"].toString();  
      if (  
        this.listTreeObj.checkedNodes.indexOf(dataId) !== -1 &&  
        this.checkNodes.indexOf(dataId) === -1 && !data[i].hasChild  
      )  
        this.checkNodes.push(dataId);  
    }  
    this.listTreeObj.fields = {  
      dataSource: data,  
      id: "uuid",  
      text: "name",  
      parentID: "parent_id",  
      hasChildren: "hasChild"  
    };  
  }  
  
  
Could you please check the above sample and get back to us, if you require any further assistance on this?  
  
Regards,  
Kanagambigai M.  


Sebastian Jonathan
Replied On October 28, 2019 07:14 PM UTC

Hi Mr. Murugan,
Thank you for your response. It is true that I can filter a single child and selected it and when I clear the filter box, parent state will be unchecked. However, if you try to filter another child, the checked nodes will be unchecked or clear state. is this because loadOnDemand ? do you mean intermediate state is a clear state?

Thank you,

Regards,
Sebastian

Keerthana Rajendran [Syncfusion]
Replied On October 29, 2019 10:18 AM UTC

Hi Sebastian,  
 
  
Good day to you.  
Query: If you try to filter another child, the checked nodes will be unchecked or clear state. is this because loadOnDemand 
When loadOnDemand is set to true, the Treeview child nodes will not be rendered until the parent element was expanded. So, the checked nodes are not maintained. So, we suggested you to set loadOnDemand as false. 
And the checked child node details are updated each time in Treeview at the time of changing data Source by using checkedNodes through TextBox component change event. 
 
changeDataSource(data) { 
                   for (let i = 0; i < data.length; i++) { 
                       let dataId = data[i]["uuid"].toString(); 
                       if ( 
                           this.listTreeObj.checkedNodes.indexOf(dataId) !== -1 && 
                           this.checkNodes.indexOf(dataId) === -1 && !data[i].hasChild 
                       ) 
                           this.checkNodes.push(dataId); 
                   } 
               } 
 
Query: Do you mean intermediate state is a clear state? 
No, intermediate state is not clear state. If any one of the children is not checked within a parent node , the corresponding parent node will be  moved to intermediate state which is represented by an icon (“-“). If all the children are checked within a parent, the corresponding parent node will be automatically changed to checked state. if none of the child is checked within a parent, the corresponding parent node automatically will be moved to unchecked state (clear state). You can check this behavior in the below demo link 
 
Please let us know if you need any further assistance. 
 
Regards, 
Keerthana.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon