Hierarchical data source and treeview.

[Jose Mejia]

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...

[Jose Mejia]

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);

[Daniel]

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

[Jose Mejia]

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.

[Daniel]

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

[Jose Mejia]

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.

[Daniel]

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

[Jose Mejia]

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.

[Daniel]

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