[Solved] Unable make TreeView work with AngulaJs service

[Chandana]

Hi,

I just started using Kendo. I am trying to bind data from AngularJs service to a TreeView without any success. Here is my AngularJs service code:

 

angular.module('testModule', []).service('testService', ['$q', '$http', '$window', function ($q, $http, $window) {
        return {
            get: get
        };

        function get() {
            var url = $window.location.origin + '/api/testData';
            return $http.get(url).then(handleSuccess, handleError);
        }

        function handleSuccess(response) {
            return response.data;
        }

        function handleError(response) {
            if (!angular.isObject(response.data) || !response.data.message) {
                return $q.reject('An unknown error occurred.');
            }
            return $q.reject(response.data.message);
        }

} ]);

Here is my AngularJs controller:

angular.module('testModule')
    .controller('testCtrl', ['$scope', '$q', '$window', 'testService', function ($scope, $q, $window, testService ) {
        $scope.testDataFromSvc = {data:[]};

        function loadRemoteData() {
            testService.get().then(function (data) {
                $scope.testDataFromSvc.data = data;
            });
        }

        $scope.something = {
            data: [{ Name: "Thing 1", id: 1 },
             { Name: "Thing 2", id: 2 },
             { Name: "Thing 3", id: 3}]
        };


        $scope.things = {
            dataSource: $scope.testDataFromSvc //Doesn't work? What should go here?
        };

        $scope.things2 = {
            dataSource: $scope.something //this works
        };
} ]);

 

Here is my html: 

<div ng-app="testModule" ng-controller="testCtrl">


       <div kendo-tree-view="tree" k-options="things"> //this doesn't display anything
             <span k-template> {{dataItem.Name}}  </span>
        </div>

        <div kendo-tree-view="tree" k-options="things2"> // this works
             <span k-template> {{dataItem.Name}}  </span>
        </div>

</div>

I checked the data in the "testDataFromSvc" looks similar to what is in "something". At one point it looked like, it displayed the correct data but now I can reproduce it. What is the right way to use the data returned by AngularJs service? Any help is greatly appreciated.

 

Thanks,

-ana

[Alex Gyoshev]

Hello Chandana,

The DataSource is not notified of the changes of this object, so no widget can be bound in this way. To achieve what you are looking for, use a custom DataSource transport:

                

$scope.things = {
    dataSource: new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {

                testService.get().then(function (data) {
                    options.success(data);
                });

            }
        }
    })
}

Regards,
Alex Gyoshev
Telerik