How to set paging in Grid when binding to JSON data

[Igor Stanek]

Hello!

We use Web KendoUI Grid (v.2013.3.1127).

We have a grid with defined DataSource and things (sorting/paging/filtering) works as intended.

But we have a problem when we trying to implement following:

We try to dynamically bind given grid to JSON data on first page load (which are part of data we load when user brings given page for first time) to save additional hit to server.

We do something like this:

$.ajax({
            url: .../getViewModel/,
            dataType: "json",
            success: function (JsonResult) {

              ...

              $("#grid").data("kendoGrid").dataSource.data(JsonResult.GridResults.GridData);

              ...
            }
            ...
}

This works well and data are there, but we have a difficulty how to set paging properties on these data, for example how to set a dataSource.total property.

We tried:

$("#grid").data("kendoGrid").dataSource.data(JsonResult. GridResults.GridData); //ok
$("# grid ").data("kendoGrid").dataSource.total(JsonResult.GridResults.GridTotalRecordCount); // do not works

and we also tried:

var grid = $("#grid").data("kendoGrid");  // ok

var newDS = new kendo.data.DataSource({
    data: JsonResult.GridResults.GridData ,
    total: JsonResult.GridResults.GridTotalRecordCount
});
grid.setDataSource(newDS);

But this do not works too.

So our question is: How to properly set paging properties while dynamically binding JSON data to the Web KendoUI Grid?

thanks in advance,
Igor.

[Rosen]

Hi Igor,

If I understand correctly, you need to use ajax binding with server paging, but initially bind the first page from the local data. In order to achieve this you will need to implement custom transport, which to return the local data as server response on initial data request. Here is a test page which demonstrates this.

Regards,
Rosen
Telerik

[Igor Stanek]

Hello Rosen!

Thanks for your answer. Your example on test page works well, but initial binding from the local data when page first load is not what we have issue with.

I try describe again what we like to achieve  ;)

We have on page KendoUI grid which use ajax binding with server paging, but on first load of given page we like to initially bind this grid to data from another ajax call called on first page load. This ajax call returns first page of data - say 10 data items of 200, and total count for all data - 200, and also other data needed on given page. 

We can successfully bind data data from that initial ajax call, but we don't know how to properly setup paging on given grid.

We like to achieve following behavior:

At first load of page we call ajaxcall which returns - first page of data for grid (say 10 data items of 200), total count for data - 200, and also some another data needed on that page. We like to have proper total count number shown on grid, as well as proper paging controls (arrows for go to next/last page) on grid after that initial binding. When user click on next page - then other ajax call happen - one which is setup in KendoUI grid configuration in transport - which returns next page of data items and total count, and from that point grid normally works with server bindings as it is configured.

What we have problem with this scenario is how to properly setup paging on KendoUI grid after initial data binding (from first ajax call at page load) on grid. We do not know how to set "total" property on grid, so paging is broken.

If you can give us example or hint how to get this work it will be great.

thanks in advance,
Igor.

[Rosen]

Hello Igor,

It seems that the test page from my previous message got messed up. 

As I have mentioned in my previous message this exact scenario is not supported out-of-the-box and will require custom transport. Thus, you will need to craft a custom transport which to handle your requirement. I have prepare another test page, which tries to mimic more closely the scenario you have described. Please feel free to use it as a base for your own custom transport implementation.

Regards,
Rosen
Telerik