Kendo-UI datastore leveraging Angular $resource

Question

I am attempting to implement a abstraction over a RESTful back-end for my persistence layer and have ran into something I find a little confusing. I am using the angular framework and more specifically the ngResource module to get access to the $resource service. I can execute my queries and work against the back-end without issue. My problem comes when integrating back into my kendo-ui datasource, the datasource never recognizes when the query has returned. From my understanding the $resource will immediately return a empty collection (array) for possible assignment and then populate that array with the results of the query when it finishes. Kendo-ui's DataSource should watch this variable and upon update reflect this back to anyone leveraging the datasource. I have successfully implemented this using a slightly different model (passing a object literal that I update myself as required) and the DataSource has no problem recognizing the updates. Any insight would be helpful!

    app.provider('remotePersistence', function () {
        this.$get = function ($resource) {
            var definitions = {
                widgets: $resource('http://127.0.0.1:3000\:3000/widget.json',{},{
                    archive: { method: 'POST', params: { archive: true }},
                    active: { method: 'POST', params: { active: true }}
                })
            };

            var datastore = {}
            var namespaces = ['widgets'];
            namespaces.forEach(function (namespace) {
                datastore[namespace] = { 
                    endpoint: definitions[namespace], 
                    cache: definitions[namespace].query() 
                };
            });
            return datastore;
        };
    });

    app.controller(
    "WidgetsSearchController",
    function ($scope, remotePersistence){

        $scope.widgets = undefined;

        $scope.visibleWidgets = new kendo.data.DataSource({
            // data: remotePersistence.widgets.cache,
            transport: {
                read: function (options) {
                    options.success(remotePersistence.widgets.cache);
                }
            }
        });
    });
    //This works but is not desirable style
    //$scope.widgets = remotePersistence.widgets.query(function(){ $scope.visibleWidgets.data($scope.widgets) });

Answer 1

For anyone following behind here is my current implementation that works nicely. I am still a bit unhappy with the manipulation I must do for the sort to be passed but it works along with paging.

app.controller(
    "WidgetSearchController",
    function ($scope, remotePersistence){

        $scope.visibleWidgets = new kendo.data.DataSource({
            widget: {
                read: function (options) {
                    if(options.data.sort){
                        options.data.order = _.map(options.data.sort, function (sortItem) {
                            return sortItem.field + " " + sortItem.dir
                        }).join(", ");
                    }
                    remotePersistence.widgets.endpoint.query(options.data, function(response){
                        console.log(response);
                        options.success(response);
                    });
                }
            },
            schema: {
                data: "widgets",
                total: "total"
            },
            pageSize: 20,
            serverSorting: true,
            serverPaging: true
            // serverFiltering: true
        });
    });

app.provider(
    'remotePersistence', 
    function () {
        this.$get = function ($resource) {
            var definitions = {
                widgets: $resource('http://127.0.0.1:3000\:3000/widgets/:id',{ id: '@id' },{
                    archive: { method: 'PUT', params: { archive: true }},
                    update: { method: 'PUT' },
                    active: { method: 'PUT', params: { active: true }},
                    query: { method: 'GET', isArray: false},


                })
            };

            var datastore = {}
            var namespaces = ['widgets'];
            namespaces.forEach(function (namespace) {
                datastore[namespace] = { 
                    endpoint: definitions[namespace], 
                    cache: definitions[namespace].query() 
                };
            });
            return datastore;
        };
    });

Answer 2

The data source needs to be notified that data has been received. Perhaps the ngResource module will trigger some callback or event when it finishes loading data. Then you can use the data() method of the Kendo DataSource to populate it with data items. All Kendo UI widgets bound to that data source will receive a notification when you use the data method.