How to control the Kendo Grid? - asp.net-mvc-4

Question

How do I control how many rows appear in a kendo grid? Real Estate is limited, so I need to have a lot of info in a pretty compact space. I'm trying to pack everything in my grid in a 300-pixel high area.
The issue I'm having is that all 200-plus rows of data that are being returned from my MVC JsonResult in my controller are displaying at once, on a single page. Not quite exactly what I'm looking for.
Code is below, if someone a little more knowledgeable about formatting a kendo grid could help out, I'd appreciate it.
Thanks!
-RC
{}
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
},
pageSizes: 8,
serverPaging: true
},
schema: {
model: {
ScheduleData: {
extensionDataField: {
fields: {
ScheduleDate: { type: "date" },
ScheduleAmount: { type: "number" },
SchedulePrice: { type: "number" },
ScheduleNotes: { type: "string" }
}
}
}
}
}
})
$('#callSched').kendoGrid({
height: '300',
sortable: true,
reorderable: true,
resizable: true,
pageable: {
numeric: true,
refresh: true,
pageSizes: true,
previousNext: true,
input: true,
info: true
},
columns: [
{
field: "ScheduleDate",
title: "Date",
template: "#= kendo.toString(kendo.parseDate(ScheduleDate, 'MM-dd-yyyy'), 'MM-dd-yyyy') #"
},
{
field: "ScheduleAmount",
title: "Amount",
},
{
field: "SchedulePrice",
title: "Price"
},
{
field: "ScheduleNotes",
title: "Notes"
}
], dataSource: RemoteJsonData_Call
});
{}

Answer 1

The problem is that you have defined that the paging is done in the server when it is not. You should say:
serverPaging: false
or just nothing since the default value is false.
With this you should have a grid with the number of pixels specified in the height option (in your example 300 pixels). Other options in you example are correct.

Answer 2

You have server paging and page size set up incorrectly here:
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
},
pageSizes: 8,
serverPaging: true
},
It should be:
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
}
},
pageSize: 8,
serverPaging: true
The config options were in the wrong place, and "pageSizes" was misspelled, it should be "pageSize" with no "s" on the end.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize