Paging not working in Kendo Grid

[swarnamala]

Number of records to display should be a drop down with the number of users they would like to view per page. The default number should be 10 records. I want the selection criteria should be in denominations of 10 up to 40. (10, 20, 30, 40) 

Code in View:

@(Html.Kendo().Grid<IncentiveViewModel>()
            .Name("Incentive")
            .Columns(columns =>
            {
                columns.Bound(p => p.Make).EditorTemplateName("MakeDropDown").Sortable(true);
                columns.Bound(p => p.Model).EditorTemplateName("ModelDropDown").Sortable(true);
                columns.Bound(p => p.Year).Sortable(true);
                columns.Bound(p => p.Term);
                columns.Bound(p => p.Rate);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.IsActive).ClientTemplate(
                    "# if (IsActive) { #" +
                        "Yes" +
                    "# } else { #" +
                        "No" +
                    "# } #"
                    );
                columns.Template(@<text></text>)
                    .Width(110)
                    .ClientTemplate(@"<a class=""k-grid-delete"" href=""\#""></a>");
            })
            .ToolBar(toolbar =>
            {
                toolbar.Create().Text("Add Incentive");
                toolbar.Save().SaveText("Save Changes").CancelText("Cancel Changes");
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Resizable(resize => resize.Columns(true))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(10))
            .Navigatable()
            .Sortable()
            .Resizable(resize => resize.Columns(true))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(10)
                .ServerOperation(false)
                    .Events(events => events.Error("ds_onError").Sync("incentivesDs_onSync").RequestEnd("ds_onRequestEnd"))
                .Model(model =>
                {
                    model.Id(p => p.IncentiveId);
                    model.Field(p => p.Year).Editable(true);
                    model.Field(p => p.Make).Editable(true);
                    model.Field(p => p.Model).Editable(true);
                    model.Field(p => p.Rate).Editable(true);
                    model.Field(p => p.StartDate).Editable(true);
                    model.Field(p => p.EndDate).Editable(true);
                    model.Field(p => p.IsActive).Editable(false);
                })
                .Create("Create", "Incentive")
                .Read("Read", "Incentive")
                .Update("Update", "Incentive")
                .Destroy("Destroy", "Incentive"))
                .Events(events => events.SaveChanges("incentivesGrid_onSaveChanges").Edit("grid_onEdit"))
         )

Even with this setting I see a paging drop down with 5, 10, 20 where as I want 10, 20, 30, 40..etc

Here is the result:

 

[Dimo]

Hello Swarnamala,

If you want to customize the page sizes dropdown items, then use the .PageSizes() setting with an array of integer values, as explained in the documentation:

http://docs.telerik.com/kendo-ui/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/PageableBuilder#methods-PageSizes(System.Int32%5B%5D)

Regards,
Dimo
Telerik