This is a migrated thread and some comments may be shown as answers.

Kendo Grid Datasource and Angular Factory

4 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 02 Dec 2014, 06:34 PM
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.


4 Answers, 1 is accepted

Sort by
0
Jason
Top achievements
Rank 1
answered on 02 Dec 2014, 07:58 PM
We figured it out.  Moved the "var deferred" into each function of the factory and it all started working.
0
Kiril Nikolov
Telerik team
answered on 04 Dec 2014, 12:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AJ
Top achievements
Rank 1
answered on 18 Nov 2016, 09:00 PM

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
            })
        }

0
Kiril Nikolov
Telerik team
answered on 21 Nov 2016, 08:22 AM
Hi Anthony,

Thanks for sharing the solution!

Regards,
Kiril Nikolov
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Kiril Nikolov
Telerik team
AJ
Top achievements
Rank 1
Share this question
or