This is a migrated thread and some comments may be shown as answers.

Paging grid that was initialized from a table

5 Answers 160 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 16 Sep 2012, 05:39 PM
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!

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Sep 2012, 11:59 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Adam
Top achievements
Rank 1
answered on 18 Sep 2012, 01:02 PM
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!
0
Andreas
Top achievements
Rank 1
answered on 28 Apr 2015, 09:07 AM

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?

0
Andreas
Top achievements
Rank 1
answered on 28 Apr 2015, 09:12 AM

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)

0
Dimo
Telerik team
answered on 04 May 2015, 06:32 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Adam
Top achievements
Rank 1
Andreas
Top achievements
Rank 1
Share this question
or