This is a migrated thread and some comments may be shown as answers.

Unable make TreeView work with AngulaJs service

1 Answer 25 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Chandana
Top achievements
Rank 1
Chandana asked on 02 Jun 2015, 10:32 PM

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

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 04 Jun 2015, 12:21 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Chandana
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or