AngualrJS Service as Kendo UI DataSource

[Aarsh]

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 ?

[Nikolay Rusev]

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

 

 

[Aarsh]

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

[Aarsh]

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

[Nikolay Rusev]

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