Example of building a hiearchal data source

[Wray]

All of the examples I have seen for the HierarchalDataSource show binding, either to local data, somewhat artificially hard coded, or to remote data that is assumed to be already in json hierarchal format.

I, however, have a flat datasource from which I need to build a hierarchy. So I started out with the following code (html not shown). The question is how to create the children (and further children of children). Obviously this needs to get more complex because I will need to access my own flat data records and also I will need templates for all nodes. But pointers for this would be a great help. Thanks in advance.


(function () {
    'use strict';
angular.module('FieldTreeApp', ['kendo.directives'])
       .controller('FieldTreeViewCtlr', function ($scope) {
           $scope.treeOptions = {
               dataSource: makeData()
           };

    function makeData() {
                var ds = new kendo.data.HierarchicalDataSource();
                ds.add({
                    text: "My first node"
                });
                ds.add({
                    text: "My second node"
                });

                var x = ds.data(); // Does get my data.

                return ds; // This does create the 2 top level nodes.
            }

[Wray]

In case anyone needs it, here is the example and text supplied by support (it is easier than I thought).

If you need to create your hierarchical data with JavaScript, you will have to manually create the hierarchical object, before passing it to the HierarchicalDataSource's data property. Another possible option is the one that you are trying to achieve, where you could add new items through the add(object) method of the HierarchicalDataSource. However, for achieving this, you need to get reference to the object that the add method return (or use the HierarchicalDataSource's get(index) method), where you could then use the append(object) method to add child elements.


<script>    $(document).ready(function () {        
dSource = new kendo.data.HierarchicalDataSource();          
       for (var i = 0; i < 2; i++) {        
    var item = dSource.add({ text: "parent" + i });          
  item.hasChildren = true;           
 item.append({ text: i + "_child1" });          
  item.append({ text: i + "_child1" });        }                      
  $("#treelist").kendoTreeView({            dataSource: dSource        });   
 });</script>