I am a beginner working on Kendo Grid. I wanted to load the data on demand in the grid, like :
I set the page size to 10, when a user scrolls down to 10 rows, the
grid should retrieve next 10 rows from database and display it on
demand.To do this, I changed "scrollable: true" to "scrollable: {virtual: true}". But this disables scrolling in the grid.
$scope.source = new kendo.data.DataSource({
batch: true,
group: getDSGroup(),
transport: {
read: userSvc.getUserList,
update: _dataUpdateItem
},
error: function (e) {
ngDialog.openConfirm({
template: 'httpErrorDialogId',
className: 'ngdialog-theme-default',
data: {
'status': e.status,
'message': e.errorThrown
}
});
},
schema: {
parse: function (data) {
$rootScope.$log.log("User list was fetched.");
if ($rootScope.sysSettings.userMgr_serverPaging)
return data;
for (var i = 0; i < data.items.length; i++) {
data.items[i].letter = data.items[i].lastName.substr(0, 1).toUpperCase();
if (data.items[i].departmentName == null) data.items[i].departmentName = $rootScope.$translate.instant("Unassigned");
if (data.items[i].userGroupName == null) data.items[i].userGroupName = $rootScope.$translate.instant("Unassigned");
}
return data;
},
model: { id: "id" },
groups: "groups",
total: "totalItems",
data: "items"
},
filter: getDSFilter(),
sort: getDSSort(),
pageSize: $rootScope.sysSettings.userMgr_serverPaging ? 10 : 0,
serverGrouping: $rootScope.sysSettings.userMgr_serverPaging,
serverPaging: true,
serverSorting: $rootScope.sysSettings.userMgr_serverPaging,
serverFiltering: $rootScope.sysSettings.userMgr_serverPaging
});
$scope.userListOptions = {
//sortable: true,
groupable: true,
selectable: false,
//pageable: true,
scrollable: {
virtual: true
},
//dataBound: function() {
// this.expandRow(this.tbody.find("tr.k-master-row").first());
//},
columns: [{
field: "firstName",
template: kendo.template($("#tpl-UserItem").html())
},
{
field: "letter",
hidden: true,
groupHeaderTemplate: "#= value #"
}]
};
$scope.isEndlessScroll = function () {
return $rootScope.sysSettings.userMgr_serverPaging;
};