How to change the default value of Grid page size in Kendo UI?

Question

I am new to Kendo UI. i have my code as follows.

@(Html.Kendo().Grid<ETS.Model.CompanyList>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.CompanyID).Title("Name").Template(@<text>@Html.ActionLink(@item.Name, "Company", "Companies", new { @id = @item.CompanyID }, new { @style = "color:black; text-decoration: none;" })</text>);
        columns.Bound(p => p.City).Title("Billing City");
        columns.Bound(p => p.SalesRep).Title("Sales Rep");
        columns.Bound(p => p.Phone).Title("Company Name");
    })
    .Pageable(pageable => pageable
         .PageSizes(true)
         .ButtonCount(5)
         .Refresh(true)
    )
    .Sortable()                       
    .HtmlAttributes(new { style = "height: auto;" })
    .BindTo(Model.Companies)
)

By default the there are 5 items displayed on the grid. Is there any way i can change that default value to 20 ?

Answer 1

Generally you would set the using the PageSize() function on your DataSource :

@(Html.Kendo().Grid<Product>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax() 
        .Read(read => read.Action("Products_Read", "Home"))
        .PageSize(20)
    )
)

or you could try limiting the available PageSizes() to just 20 :

.Pageable(pageable => pageable.PageSizes(new int[] {20}) ...)

Additionally, it can be set through the Javascript API via :

var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(20);
grid.refresh();