AngualrJS Service as Kendo UI DataSource

5 posts, 0 answers
  1. Aarsh
    Aarsh avatar
    12 posts
    Member since:
    Jan 2015

    Posted 13 Jan 2015 Link to this post

    I am using AngularJS Directives for Kendo UI 2014.3.1119, using ASP.NET Web API on .NET 4.5.2.
    The Kendo UI Demo page for TreeList with AngularJS does not seem to fit in my scenario.
    I've an AnguarJS SPA that uses Kendo UI Directives.

    I've an existing HTML page containing a simple HTML table powered by ngRepeat.
    This HTML is bound to an existing AnguarJS controller.

    Until now, I have been using standard AngularJS $http Service like below that I'd use to get data from server : ( not OData, just regular JSON )

    My goal :
    ========

    Was to actually enable grouping in the table, and looking that the demo TreeList control seem to be the one I wanted to use, as I the records are read-only.
    At the end of the post I've also posted the code that I've tried so far and it did seem to hit the server


    but I am getting the error in browser console which reads :


    "TypeError: Cannot read property 'toLowerCase' of undefined"


    ng Controller :

    service.getData(tempSkip, $scope.queuePageSize).success(function (data, status, headers, config) {
        $scope.messages = data;
        $scope.showCaption = false;
        $scope.loadingMessages = false;
    }).error(function (data, status, headers, config) {
        $scope.workingText = 'Oh CRUD ! Change a few things up and try again.';
        console.log('error getting messages');
        $scope.loadingMessages = false;
    });


    ng Service :

    (function () {
        'use strict';
     
        angular
            .module('app')
            .service('messageQueueService', ['$http', messageQueueService]);
     
        function messageQueueService($http) {
            var baseUrl = rootUrl + 'api/MessageQueue/';
            this.getData = getData;
     
        function getData(skip, take) {
                return $http({
                    url: baseUrl + 'Get',
                    params: {
                        val1: skip,
                        val2: take
                    },
                    method: 'GET'
                });
            }
    }
    })();

    Here is what I've tried so far :

    I do not prefer re-creating a new service file for an existing service but I created one for test anyway. Below is how it looks :

    (function () {
        'use strict';
     
        angular
            .module('app')
            .factory('messageQueueKendoDsService', ['$http', messageQueueKendoDsService]);
     
        function messageQueueKendoDsService($http) {
             var baseUrl = rootUrl + 'api/MessageQueue/';
             var knedoDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        async: false,
                        url: baseUrl + 'Get',
                        dataType: 'json'
                    }
                },
                batch: false,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            parentId: { field: 'FenergoMessageId', nullable: true },
                            Id: { field: 'Id', type: 'number'}
                        }
                    }
                }
            });
             return knedoDataSource;
        }
    })();

    Then in my controller :

    $scope.treelistOptions = {
        dataSource: messageQueueDataSource,
        sortable: true,
        columns: [
            {
                field: 'Id',
                title: 'Message ID'
            },
            {
                field: 'FenergoMessageId',
                title: 'Fenergo ID'
            }          
        ]
    };

    And finally in my HTML :

    <div>
        <div data-kendo-treelist="" data-options="treelistOptions"></div>
    </div>


    My Questions :
    1. How can I fix this ?
    2. What is the most elegant solution ?
    3. Would not that be possible to reuse the existing Angular Service that I've ?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 15 Jan 2015 Link to this post

    Hello Aarsh,

    TreeList dataSource is a special type of data source - TreeListDataSource. It is the only type of data source supported. In your example you are binding it to the default DataSource and this might be the reason for the error.

    Regards,
    Nikolay Rusev
    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
  4. Aarsh
    Aarsh avatar
    12 posts
    Member since:
    Jan 2015

    Posted 15 Jan 2015 Link to this post

    Well, I've an AngularJS service feeding JSON data to my template, I'd see if I can accomplish it using this way : http://demos.telerik.com/kendo-ui/treelist/local-data-binding
  5. Aarsh
    Aarsh avatar
    12 posts
    Member since:
    Jan 2015

    Posted 21 Jan 2015 in reply to Aarsh Link to this post

    How about grid ?

    I've another similar issue using Professional Kendo UI, binding Grid with AngularJS $http service, I've modified the demo and shared here :

    http://dojo.telerik.com/EHUzu
    http://www.telerik.com/forums/how-binding-angularjs-kendo-with-$http-service#2f2SnlzgHkaxQZq4Z4TuwA
  6. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 23 Jan 2015 Link to this post

    Hello Aarsh,

    Please avoid duplication of post as this makes it harder for us the progress of different cases.

    There is an error in your example as you have defined schema.data ant the response passed to the DataSource doesn't match that schema configuration.

    http://dojo.telerik.com/@rusev/Ifuwo

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready