Paging grid that was initialized from a table

[Adam]

Hello,

I have a table I'd like to display that's small enough to not require server side paging ... I'd really just like to load a Kendo UI Grid on from the table and use paging.

It looks like I need to set page size on the data source, but I'm not sure how to do that when the data source is the HTML Table.

Any suggestions?

Thanks!

[Dimo]

Hello Adam,

If all the data is already in the Grid, then simply use scrolling, no paging is required. You could define the Grid in the following way, but I am not sure that hiding part of the available data for the sake of paging will make any sense. The simpler a user interaction (i.e. no paging), the better.

$("#grid").kendoGrid({
    height: 250,
    pageable: true,
    dataSource: {
        pageSize: 5
    }
});

All the best,
Dimo
the Telerik team

[Adam]

Thanks Dimo.

I agree that it might be slightly more convenient to simply scroll, often times consistency is more important - so having the grids look and feel the same regardless of their data source is important.

Thanks again!

[Andreas]

So, as I understand the answer to the original question is that it is not supported.

Because the question was about *how to* use paging, and the answer was just not to use it :)

Am I right?

[Andreas]

Now I saw the If statement from the beginning of the answer. Sorry.

I have similar problem, but with server side binding, so I assumed this is the same.

So, is there a way to initialize the grid from table, but with server side binding (the data will contain just the first page)

[Dimo]

Hi Daniel,

It is possible to achieve the desired behavior if you use the Grid's MVC wrapper and the configuration below. In this case, the Grid will use server-side binding and server-side table rendering for its first page, and Ajax binding subsequently.

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).Title("Product Name");
        columns.Bound(p => p.UnitPrice).Title("Unit Price");
        columns.Bound(p => p.UnitsInStock).Title("Units In Stock");
        columns.Bound(p => p.Discontinued);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(model => model.Id(p => p.ProductID))
        .Read("Editing_Read", "Grid")
     )
)

There are two other ways to achieve the same behavior when NOT using the Kendo UI MVC wrappers:

1) use a custom transport, which provides local data initially, and makes Ajax requests subsequently. A custom transport means that "read", "update", "create" and "destroy" are defined as functions as shown here:

http://docs.telerik.com/kendo-ui/framework/datasource/crud#read-local

2) use a server-rendered HTML table and a Javascript initialization statement for the Grid, which resembles the initialization statement generated by the Grid's MVC wrapper. The data service must be implemented in a specific way, so that it supports the schema and formatting of the Grid request parameters. Normally, it should be the other way around. This approach is somewhat hackish, not officially supported and not recommended. I am mentioning it only for the sake of information accuracy.

Regards,
Dimo
Telerik