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. Image for the cookie policy date
close icon

mixed loading content



Using the TreeView Component, I have it set to loadOnDemand = true
which works great on the upper levels but when I get to subfolders and I might want to pass 
parent and children together they no longer end up under each other.

My question is, with loadOnDemand turned on, can you pass children at the same time as parent from 
the dataSource or do you always have to just pass the parents?

thanks

7 Replies

PR Piramanayagam Ramakrishnan Syncfusion Team June 29, 2016 01:11 PM UTC

Hi David, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query. You can achieve your requirement by using “expanded” member fields. You can also pass the child data source along with parent data source in TreeView. Please refer the below code sample, 
 
[Script] 
 
var localData = [ 
    { id: 1, name: "Local Disk(C:)", hasChild: true }, 
    { id: 2, pid: 1, name: "Folder 1" }, 
    { id: 3, pid: 1, name: "Folder 2" }, 
    { id: 4, pid: 1, name: "Folder 3", hasChild: true, expanded: true }, 
    { id: 10, pid: 4, name: "File 1" }, 
    { id: 11, pid: 4, name: "File 2", hasChild: true, expanded: true }, 
    { id: 12, pid: 11, name: "File 3" }, 
    { id: 5, name: "Local Disk(D:)", hasChild: true }, 
    { id: 6, pid: 5, name: "Folder 4", hasChild: true, expanded: true }, 
    { id: 7, pid: 6, name: "File 4" }, 
    { id: 8, pid: 6, name: "File 5" }, 
    { id: 9, pid: 6, name: "File 6" }, 
    { id: 10, pid: 5, name: "Folder 5" }, 
    { id: 11, pid: 5, name: "Folder 6" }, 
    { id: 12, name: "Local Disk(E:)", hasChild: true }, 
    { id: 13, pid: 12, name: "Folder 7", hasChild: true, expanded: true }, 
    { id: 14, pid: 13, name: "File 7" }, 
    { id: 15, pid: 13, name: "File 8" }, 
    { id: 16, pid: 13, name: "File 9" }, 
    { id: 17, pid: 12, name: "Folder 8" }, 
    { id: 18, pid: 12, name: "Folder 9" } 
]; 
 
$("#tree1").ejTreeView({ 
    loadOnDemand: true, 
    fields: { dataSource: localData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" } 
}); 
 
 
In the above code sample, we have showcased that, when we expand the root node then all child nodes will be rendered. 
 
We have prepared the sample based on your requirement (“I might want to pass parent and children together they no longer end up under each other”) in the link: http://jsplayground.syncfusion.com/5bwpzg1n 
 
Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert with more information for us to assist you. 
 
Regards, 
Piramanayagam R


DB David Barrett June 29, 2016 08:15 PM UTC


Thanks for the quick reply. The issue doesn't seem to apply when you give the system all the data at once. For example heres pieces of what im getting

Heres my tree view JS

$(".tree-json").ejTreeView({
        enableMultipleExpand: false,
        expandOn: "click",
        loadOnDemand: true,
        fields: {
            dataSource: salesTreeData,
            id: "key", 
            text: "title", 
            parentId: "parent", 
            spriteCssClass: 'icon',
            expanded:'expanded',
            hasChild: "children",
            htmlAttribute: 'extraClasses'
        }
    });


Now on first load it gets this Json info

  1. {key: "uid-1", title: "David Barrett", icon: "icon icon-user mfolder-main", children: true, parent:null}
  2. {key: "uid-47", title: "David Barrett", icon: "icon icon-user mfolder-main", children: true, parent:null}
  3. {key: "uid-29", title: "Test Carey", icon: "icon icon-user mfolder-main", children: true, parent:null}
  4. {key: "uid-20", title: "Andy Jones", icon: "icon icon-user mfolder-main", children: true, parent:null}

Now that loads fine and works, so I click on the first person in the list and the treeview loads this second level json

  1. {key: "sid-100667", extraClasses: {class: "sch-load"}, title: "jojo (100667)", parent: "uid-1", children:true, icon: "icon icon-store rfolder-act"}
  2. {key: "sid-100123", extraClasses: {class: "sch-load"}, title: "test (100667)", parent: "uid-1", children:true, icon: "icon icon-store rfolder-act"}
  3. {key: "sid-100666", extraClasses: {class: "sch-load"}, title: "test 2 (100666)", parent: "uid-1", children:true, icon: "icon icon-store rfolder-act"}
  4. {key: "sid-200626", extraClasses: {class: "sch-load"}, title: "Troy School (200626)", parent: "uid-1", children:true, icon: "icon icon-store rfolder-act"}
This works fine and all the items end up under the person I clicked on, now when I click the next level is where I end up with a problem as I am now trying to hand the system all the next levels
so when I hand the control this json on clicking one of the above

  1. {key: "sid-200626-pdf", title: "Current Events", parent: "sid-200626", expanded:true, children:true, icon: "icon icon-folder-open3 rfolder-act"}
  2. {key: "sid-200626-cds", title: "CD Orders", parent: "sid-200626", expanded:true, children:true, icon: "icon icon-folder-open3 rfolder-act"}
  3. {key: "sid-200626-cds-1309", title: "Image & Data Export", parent: "sid-200626-cds", children:false, icon:"icon icon-target"}
Now all 3 of these end up under the right parent, but the child does not end up under the parent it is treated as its own item on the treeview

 If I hand the system all the data in the beginning then it seems to handle everything just fine, its when I piece it together 
like this that it seems I can not hand it back more than one level at a time.

I hope this gives more data to the issue

Thanks




PR Piramanayagam Ramakrishnan Syncfusion Team June 30, 2016 12:35 PM UTC

Hi David, 
 
Thanks for your update. 
 
We have analyzed your query and given code. Based on this, we suspect that you didn’t add the “expanded” member field for “Troy School” object of data source. So that, “Troy Shool” node child is not loaded when we expand the first level node. 
 
We would like to inform you that, when we give “expanded” member field to an object then TreeView loads the child nodes of the specified object.  
 
We have prepared the sample based on your requirement with your given code in the link: 
 
If you still face the same issue, kindly get back to us with more information or provide sample based on your application along with the replication procedure to reproduce the issue at our end. This would be helpful for us to identify the issue and provide a solution at the earliest. 
 
Regards, 
Piramanayagam R


DB David Barrett June 30, 2016 04:05 PM UTC


Thanks for reply.

I went through and added expanded to all items that had children and it changes nothing in the tree view. I think the problem lies in the piecemeal handing of data. I will work up a simple version of the script separate from my application and test that and then if it still happens ill upload the whole thing to you. Since im using JS/PHP/MySQL Ill have to build the simple app to use something similar. 

Ill try and get that done in the next day or two and let you know Thanks


PR Piramanayagam Ramakrishnan Syncfusion Team July 1, 2016 05:58 AM UTC

Hi David 
 
Thanks for your update. 
 
We will wait to hear from you. 
 
Regards, 
Piramanayagam R


DB David Barrett July 1, 2016 04:46 PM UTC




Thanks for all your help. In writing the smaller version I tracked down where the issue was with my tree and it was something I was doing unknowingly that made it fail. I ended up with some items that had the same id as other items and that was confusing the system as to where child items were going. I didn't notice those items as they were in a separate part of tree that I was not using yet. I have fixed that issue and now I can make it function. Thanks for all the information


PR Piramanayagam Ramakrishnan Syncfusion Team July 4, 2016 05:15 AM UTC

Hi David, 
 
We are glad to know that your issue has been fixed. 
Please let us know if you have any other concerns on this. 
 
Regards, 
Piramanayagam R 


Loader.
Live Chat Icon For mobile
Up arrow icon