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