Kendo Grid Datasource and Angular Factory

[Jason]

I'm having issues when we try to refresh our kendo grid if we use a factory promise in our datasource.  Here is a code sample of what we are trying to do:

In the html file:

<div data-ng-controller="ModalUserInbox as vm">
    <div kendo-grid="vm.grid" options="vm.mainGridOptions" height="300"></div>
</div>

In the controller:

vm.mainGridOptions = {
                dataSource: {
                    type: "json",
                    transport: {
                        read: 
                            function (e) {
                            UserInboxFactory.getUserInbox().
                            then(function (data) {
                                e.success(data);
                            });
                        }
                    },
                    schema: {  
                        model: {  
                            fields: {  
                                ColumnSelected: { type: "boolean" },
                                Extension: { type: "string", editable: false },
                                Subject: { type: "string", editable: false },
                                Client: { type: "string", editable: false },
                                CreatedOn: { type: "date", editable: false }
                            }  
                        }  
                    },
                    pageSize: 8,
                    serverPaging: false,
                    serverSorting: false,
                    autosync: true
                },

In the factory UserInbox:

function UserInboxFactory($http, $q, RequestContext, Utility) {
        var deferred = $q.defer();
        var service = {
            getUserInbox: getUserInbox
        };

        return service;

        function getUserInbox() {
            $http({
                method: "GET", cache: false,
                url: RequestContext.PathAPI + 'user/Message/UserInbox/'
            }).success(function (data) {
                deferred.resolve(data);
            }).error(function (response) {
                deferred.reject(response);
            })

            return deferred.promise;
        }
    }

This works great on first load but I added a refresh button which tries to refresh the data:

function refreshMessages() {
            var grid = $("#grid").data("kendoGrid");

            grid.dataSource.read();
            grid.refresh();
        }

I can see the call to get the data but the data never actually refreshes.  What am I doing wrong?  If I change the read to directly use the url from the factory everything works perfect.

[Jason]

We figured it out.  Moved the "var deferred" into each function of the factory and it all started working.

[Kiril Nikolov]

Hello Jason,

You need to declare new deferred every time, as the previous deferred is already resolved, and this is why the subsequent read() requests are not fulfilled.

Regards,
Kiril Nikolov
Telerik

 

 

[AJ]

You don't actually have to declare a deferred object at all.  The angular $http service returns promises already, so you can just do:

function getUserInbox() {

            //returning this $http call will make getUserInbox() "thennable". so, you can do myService.getUserInbox().then(function(){})
            return $http({
                method: "GET", cache: false,
                url: RequestContext.PathAPI + 'user/Message/UserInbox/'

            //success has been deprecated -- use .then instead now
            }).then(function (response) {
                //do something in case of success or just leave it off all together

             //error has been deprecated -- use .catch instead now
            }).catch(function (error) {
                //do something in case of failure or just leave it off all together
            })
        }

[Kiril Nikolov]

Hi Anthony,

Thanks for sharing the solution!

Regards,
Kiril Nikolov
Telerik by Progress