Hierarchical data source and treeview.

9 posts, 2 answers
  1. Jose Mejia
    Jose  Mejia avatar
    107 posts
    Member since:
    May 2009

    Posted 24 Sep 2013 Link to this post

    Hello!


    I have following data strucure: there are proejcts which has some items, these items can have other items as childs and as parents
    accordingly.
    --project1:
        --item1
                --item3
                      --item4
        --item2
    --project2:
         //...      
    EntityResource.query(function (entities)
     {
         //Entities are loaded dynamically when project selected.
      
    //form data and append to tree
      treeview.append(..., projectNode);
    }
    Entities is a simple array of Resource objects (I use REST functionality from AngularJS), and some of them has circular references to each other,
    say  I  have some EntityDto which has Children property which is array of child entities, and there is also Parent property which points to parent entity.

    EntityDto has following properties:
    $id: "1"
    Children: Array[2]
    DtoKey: "EntityId=77"
    EntityId: 77
    Name: "file10.2"
    Parent: null

    So I decided to use existing functionality like hierarchical data source:
    EntityResource.query(function (entities)
     {
       var localDataSource = new kendo.data.HierarchicalDataSource({ data: entities});
         localDataSource .fetch();  
        treeview.append(localDataSource ,projectNode);
    }
    And of course it doesn't work... I guess I have to specify schema and model,  but I didn't find any example that is similiar to my case.
    I need to get somethin like this:
      var hierarchialEntities = [ {
          EntityName: "Parent1",
          items: [
            { EntityName: "Entity1", class: '.entity-node', isEntity: true },
            { EntityName: "Entity2", class: '.entity-node', isEntity: true },
            { EntityName: "Entity3", class: '.entity-node', isEntity: true,
              items: [{ EntityName: "Entity7", class: '.entity-node', isEntity: true }]
                 }
          ]
      }, {
          EntityName: "Parent2",
          items: [
            { EntityName: "Entity4", class: '.entity-node', isEntity: true},
            { EntityName: "Entity5", class: '.entity-node', isEntity: true},
            { EntityName: "Entity6", class: '.entity-node', isEntity: true }
          ]
      }
    ];
     
     treeview.append(hierarchialEntities,projectNode); //works as expected!!!

    Can anybody explain, what I'm doing wrong? Or point to useful example or source code.

    Thanks in advance.

    UPDATE.
    I will a little bit reformulate the question: is there a way in kendo-ui to get hierarchialEntities  (see above) from array of EntitiesDto (see above)?
    I supposed that HierarchicalDataSource can do that automatically, provide array of EntitiesDto and retrive hierarchialEntities...


  2. Jose Mejia
    Jose  Mejia avatar
    107 posts
    Member since:
    May 2009

    Posted 24 Sep 2013 Link to this post

    This code shows flat list instead of hierarchial view:
    var localDataSource =new kendo.data.HierarchicalDataSource({
             
            data:entities,
            schema: {
     
                model: {
                    hasChildren: true,
                    id: "EntityId",
                    Children: "Children",
                    text:"EntityName"
                    }
                }
            });
          
     localDataSource.fetch();
     var t = localDataSource.data();
     treeview.append(t , projectNode);
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 Sep 2013 Link to this post

    Hi,

    The model children configuration should start with a lower case letter. Similar scenario is demonstrated in this demo. i also created a jsBin example using the data that you provided.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jose Mejia
    Jose  Mejia avatar
    107 posts
    Member since:
    May 2009

    Posted 26 Sep 2013 Link to this post

    Thank you for response, Daniel.

    Let me clarify.
    I have an array of entities, this entites has links to other entities, e.g.  Children(zero or more) and Parent (zero or one).
    I need to build treeview to visualize their strucuture. For now I'm wrote code  to represent them as hierarchialEntities  (see above).
    And I supposed that it can be done automatically with help of stuff like Hierarchical data source,  because it's purpose is self explanatory.
    So, I hoped that I can provide my array of entities, specify structure among them (children property) and  voila.
    But it doesn't work... and I don't know why. Here is code I use:
    01.      var   localDataSource =new kendo.data.HierarchicalDataSource({
    02.        data:entities,
    03.        schema: {
    04. 
    05.            model: {
    06.                     hasChildren: "Children",
    07.                     id: "EntityId",
    08.                     children: "Children",
    09.                   }
    10.            }
    11.        });
    12.localDataSource.fetch();
    13.var t = localDataSource.data();
    14.treeview.append(t , projectNode);
    It simply show them as flat list of items.  I'm using circular references among entities, so maybe they just treated differently: say entitie1 has child entitie2,  entitie2 has child entitie3. entitie2 should be treated as the same -- child for e1 and parent for e2, but HDS suppose that they are (child e2 and parent e2) different entities and cannot establish link between them. I can't understand why it doesn't work.
  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 30 Sep 2013 Link to this post

    Hello again,

    Could you provide the data that you are passing to the HierarchicalDataSource or modify the jsBin from my previous reply so that it reproduces the problem?

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Jose Mejia
    Jose  Mejia avatar
    107 posts
    Member since:
    May 2009

    Posted 30 Sep 2013 Link to this post

    Hello, Daniel!

    Here is my sample.

    Case 1 works as expected*. But I'm really interested in case 2 scenario when
    I have to add some items to existing node, like entities to some project.
    And it doesn't work. You may comment /uncomment appropriate rows for case 2a and case 2b.
    I merely understand why I got undefined in case 2a, but don't understand
    why it doesn't work for case 2b. Why it is flat list? What method should I call to get hierarchial data?

    *
    1) Related to common case1 I'm not quite uderstand why do I see undefined items? Is it possible to filter them somehow?
    2) I've also mentioned that order of items does matter. Suppose that data that I've provided retireved by the following order:
      
    return new List<Entity> { e1, e2,  e3, e4, e5, e6, e7 };
    if I exchange e1 and e2, then we won't seen e1 and e3. But it doesn't relate to our topic, because it is the serialization stuff. So there should be done some
    work on the server side to properly display hierarchy.

    Thanks in advance.
  8. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 02 Oct 2013 Link to this post

    Hi,

    You could apply a filter to the dataSource if you do not wish for the items with no Name set to be displayed. I updated the jsBin to demonstrate this scenario.
    The children are not shown in the second case because an array is assign for the treeview dataSource without the schema being set so the dataSource that the treeview uses will not know how to get the children. You should specify the schema in order to avoid this problem. I also updated the jsBin to demonstrates this scenario.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Jose Mejia
    Jose  Mejia avatar
    107 posts
    Member since:
    May 2009

    Posted 03 Oct 2013 Link to this post

    Daniel, thank you so much!

    But I'm  struggling with undefined items for this case.
    If you uncomment row with filter  definition it won't work at  all.
    What I'm doing wrong?

    Thanks in advance.
  10. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 07 Oct 2013 Link to this post

    Hello,

    The initial items do not have a field name EntityName so they will not be shown. If the filter should not be applied to the top level then you should iterate over the nodes children and set their filter after the initialization. In the particular scenario you might also get the children data from the dataSource view as demonstrated in this updated example.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready