KendoUI TreeView in AngularJS: how to load complete HierarchicalDataSource in a single server request?

Question

I have coded a KendoUI/AngularJS TreeView that makes a GET server request to retrieve JSON data. The problem is that only the first node is shown in the tree, even though the JSON response contains a full tree.

I read here that since the tree uses a HierarchicalDataSource there's a workaround to fetch the complete tree. However the workaround is not in AngularJS and I cannot figure out how to implement it loading the tree with the k-options attribute. How to load and show the complete tree in a single request?

This is the HTML:

     <div ng-controller="ctrl">             
        <div id="treediv" kendo-tree-view="tree" k-options="treeOptions"></div>
     </div>

And this is the JavaScript:

app.controller('ctrl', ['$scope','$http', function($scope,$http) {

    $scope.treeOptions = {
            dataSource: {
                transport: {
                    read: function (e) {
                         $http({
                              method: 'GET',
                              url: '/loadtree',
                              headers: {
                                   'Content-Type': 'application/json'
                              }
                            }).
                            success(function(data, status, headers, config) {
                                  e.success(data.tree);
                            }).
                            error(function(data, status, headers, config) {
                                  alert('System error');
                            });
                          }
                       }
                    }
                };
          }]);

Answer 1

The answer is to implement an init function in the controller that will populate the complete data source (i.e. via $http) before the tree is loaded.