[Solved] Telerik MVC Grid page size drop-down values

[Ramesh]

Hi,

We have a requirement where we need to show page size drop-down values as 5,15,25,50,etc., in Telerik MVC Grid. By default the values shown in the grid are 5,10,20 and 50.  Do we have this feature in Telerik MVC Grid?

Thanks
Ramesh M

[Ramesh]

Hi,

Can I know if the below requirement can be achieved with the Telerik MVC Grid.

Thanks
Ramesh M

[SEAN]

It is in the GridPagerSettingsBuilder, which is not in the docs for some reason.  It is a second parameter to the PageSize builder method, so where you have this in your declaration

.Pageable(pager => pager.PageSize(20))

just add your size list like this

.Pageable(pager => pager.PageSize(20, new int[] {25, 50, 100, 200})) 

Sean

[Ramesh]

Hi Sean,

Thank you, It worked for me.

Thanks
Ramesh M

[John]

I was not able to make that work?

Compiler Error Message: CS1061: 'Kendo.Mvc.UI.Fluent.PageableBuilder' does not contain a definition for 'PageSize' and no extension method 'PageSize' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.PageableBuilder' could be found (are you missing a using directive or an assembly reference?)
 

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.SupplierInvoiceNumber);
        columns.Bound(p => p.DateInvoiceJulian);
        columns.Bound(p => p.DateofLastSentReminder);
        columns.Bound(p => p.AmountOpen);
        columns.Bound(p => p.Reference);
        columns.Bound(p => p.PurchaseOrder);
    })
    .Groupable()
    .Pageable(pager => pager.PageSize(20, new int[] {25, 50, 100, 200}))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Invoice_Read", "InvoicePrint"))
    )
)

What am i missing?

[SEAN]

The code I gave is for the Telerik MVC Extensions, not for the Kendo UI Grid. For the Kendo UI Grid, you want the PageSizes property in Pageable to set the sizes, and you set the page size separately with the PageSize property of the DataSource, something like this:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.SupplierInvoiceNumber);
        columns.Bound(p => p.DateInvoiceJulian);
        columns.Bound(p => p.DateofLastSentReminder);
        columns.Bound(p => p.AmountOpen);
        columns.Bound(p => p.Reference);
        columns.Bound(p => p.PurchaseOrder);
    })
    .Groupable()
    .Pageable(pager => pager.PageSizes(new int[] {25, 50, 100, 200}))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Invoice_Read", "InvoicePrint"))
        .PageSize(20)
    )
)

[John]

Thanks.  This sets the page size statically, how can we make it so the user can choose the page size?

[SEAN]

If you mean you want the user to be able to type in a page size instead of selecting from a list, I think you're on your own, you'd have to code it yourself using the client API.

[Karen]

I got it, it wasn't in the right place:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.SupplierInvoiceNumber)
                   .ClientTemplate("<input name=\"selectedIds\" type=\"checkbox\" value=\"#=SupplierInvoiceNumber#\" />")
                   .HeaderTemplate("<input type=\"checkbox\" class=\"selectAll\" />")
                   .Width(30)
                   .Sortable(false)
                   .Filterable(false);
            columns.Bound(p => p.SupplierInvoiceNumber);
            columns.Bound(p => p.DateInvoiceJulian);//.JdeToDate());
            columns.Bound(p => p.DateofLastSentReminder);//.JdeToDate());
            columns.Bound(p => p.AmountOpen).Format("{0:c}");
            columns.Bound(p => p.Reference);
            columns.Bound(p => p.PurchaseOrder);
        })
    .Pageable(paging => paging
      .Input(false)
      .Numeric(true)
      .Info(false)
      .PreviousNext(true)
      .PageSizes(new[] { 10, 25, 50 })
      .Refresh(false)
   )
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("Invoice_Read", "InvoicePrint"))
        .Sort(sort => sort.Add(p => p.DateInvoiceJulian).Descending())
    )

)