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

Kendo Grid Datasource and Angular Factory

4 Answers 338 Views

Grid

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

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

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