Wednesday, August 7, 2013

Setting up a Kendo Paging Grid

I was pulling my hair out trying to get the Grid to function nicely, with the paging enabled.  I finally went back to fundamentals, copying the format from the Kendo site.  Here is my final configuration:

        $("#ip_reportGrid").kendoGrid({
            dataSource: {
                data: myDataSource,
                pageSize: 15
            },
            height: '532',
            scrollable: true,
            sortable: true,
            filterable: false,
            pageable: {
                input: true,
                numeric: false,
            },
            columns: [

                { field: "Action", title: "Action", encoded: false, width: 205 },
                { field: "ItemDescription", title: "Item" },
                { field: "BatchDesignator", title: "Batch #" },
                { field: "SerialNumber", title: "Run #" },
                { field: "LocationName", title: "Location" },
                { field: "Quantity", title: "Quantity" },
                { field: "UnitOfMeasure", title: "UoM" }
            ],

        });

The data element 'myDataSource' is an array of objects.  Each object has elements that are listed in the columns section above.

The piece that I had been missing was the  pageSize element in the dataSource section, which indicated how many rows to pull from the datasource for every page.

No comments:

Post a Comment