How to control the Kendo Grid?

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

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

Answer 2

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.