Kendo-grid not paging local data - kendo-ui

Question

I'm trying to figure out how to make paging work with local data. Currently I have a DataSource:
vm.kendoData = new kendo.data.DataSource({
serverPaging: true,
pageSize: 5
});
And when I get the data from server it is assigned to the DS:
vm.kendoData.data = $scope.records;
The following is the grid mark-up:
<kendo-grid data-source="vm.kendoData.data" options="vm.gridOptions"><kendo-grid>
And this is the options definition:
vm.gridOptions = {
columns: [
{
field: "Col1",
title: "Col1",
width: "120px"
}, {
field: "Col2",
title: "Col2",
width: "120px"
}, {
field: "Col3",
title: "Col3",
width: "120px"
}, {
field: "Col4",
title: "Col4",
width: "120px"
}
],
pageSize: 10,
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
}
What am I missing?

Answer 1

Here's why it doesn't work as you expect:
Since your datasource is local, serverPaging should be set to false (because there's no call to a server)
pageSize is not an option of grid, it's an option of grid.pageable, but the documentation states:
Don't forget to set a pageSize, no matter if paging is performed client-side or server-side. A pageSize can be defined in the pageable settings, or in the dataSource settings. If an already existing datasource instance is passed to the grid, then the pagesize option should be set in the dataSource's settings and not in the pageable settings.
So to sum up:
vm.kendoData = new kendo.data.DataSource({
serverPaging: false,
pageSize: 5,
data: $scope.records
});
vm.gridOptions = {
columns: [
{
field: "Col1",
title: "Col1",
width: "120px"
}, {
field: "Col2",
title: "Col2",
width: "120px"
}, {
field: "Col3",
title: "Col3",
width: "120px"
}, {
field: "Col4",
title: "Col4",
width: "120px"
}
],
pageable: true,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
}
I've created a fiddle to demonstrate: https://jsfiddle.net/86w9u27h/7/
Note: since you're already fetching data from the server, why don't you create a remote datasource with paging on the server?