Unable make TreeView work with AngulaJs service

2 posts, 0 answers
  1. Chandana
    Chandana avatar
    1 posts
    Member since:
    May 2015

    Posted 02 Jun 2015 Link to this post

    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

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top