CODEWITHSUNDEEP
asp.net-mvc-4kendo-uikendo-grid
I'm busy coding
I'm busy coding

Reputation: 1668

items per page in header of Kendo UI Grid

I'm trying to get Kendo Grid to show a number of products per page, and with following code it will render a drop down to choose a number of items per page in the footer of the grid.

Is it possible to render the drop down in the header or in some other html element outside of the grid itself?

    @(Html.Kendo().Grid(Model.Products)
        .Name("Grid")
        .Columns(columns =>
        {               
            columns.Bound(p => p.Id).Groupable(false).Visible(false);
            columns.Bound(p => p.Name);
            columns.Bound(p => p.UnitPrice);
        })
        .Pageable(pager => { pager.PageSizes(true); })
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Products_Read")
        )
    )

Upvotes: 1

Views: 2409

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

It is not possible to render the built-in pages dropdown outside of the grid. However it is relatively easy to create a separate dropdownlist and change the page size of the grid:

@(Html.Kendo().DropDownList()
      .Name("pages")
      .Events(e => e.Change("onChange"))
)

<script>
function onChange() {
     $("#Grid").data("kendoGrid").dataSource.pageSize(this.value());
}
</script>

Here is a live demo: http://jsbin.com/uwiqow/1/edit

Upvotes: 3

Related Questions