Refreshing the Grid using local data

[Khushali]

Hi,

I have a Kendo grid where I get the data from the server using jquery's ajax call. On success, the response(JSON data) that is received is stored in a variable and set as the datasource of the grid. Grid works fine. But, in pagination(client side only), when the last page is clicked, it gives error...
Like, suppose i have the fields as, "period", "Doctype", "Status". Then it gives error, "cant find the variable : period". I added the "total" count using GridData.length (GridData is the variable where the json data for the grid from server is stored). It resolved the problem. But now, when i reload the grid, how can i set "total" again? I tried something like this:

 var grid = $("#gridDiv").data("kendoGrid");
 var new_data = getNewData();
 grid.dataSource.add(new_data);
 grid.dataSource.total(new_data.length);
 $("#gridDiv").data("kendoGrid").dataSource.read();
But, this does not work. It again gives the same error on click of the last page. Any suggestions?

[Rosen]

Hello Khushali,

In order to change the data you should use the data method passing the new data.

var grid = $("#gridDiv").data("kendoGrid");
var new_data = getNewData();
grid.dataSource.data(new_data);

Regards,
Rosen
the Telerik team

[Khushali]

Hi Rosen,
Thanks for your immediate reply.

I tried the code given by you. I am able to reload the grid now. And no error comes on last page. But, now when new data has more number of pages than the old data, then new pages are getting rendered only when i click on some page link.And if the number of pages in the new data are less than the old data and i am on a page number greater than in the new data then the grid collapses.When i click on some other page number,it expands with the new data and exact number of pages. In either of the cases it does not get rendered automatically and gets rendered only on click of page number. What can be done here?
Regards,
Khushali

[Rosen]

Hello Khushali,

In your case you may move the current page to be the first one by using DataSource's page method:

var grid = $("#gridDiv").data("kendoGrid");
var new_data = getNewData();
grid.dataSource.data(new_data);

grid.dataSource.page(1);

Regards,
Rosen
the Telerik team

[Khushali]

Hi Rosen,

Thanks for the answer. It works fine now. Can i get a loading image in the grid, whenever the call to the server is made?

Regards,
Khushali

[Rosen]

Hi Khushali,

The grid loading indicator will be displayed automatically when remote DataSource is used.

In order to manually show/hide loading indicator over an html element, you may use kendo.ui.progress function:

kendo.ui.progress($("#container")/*The container that will hold the overlay*/, true /*or false to hide the overlay*/);

Regards,
Rosen
the Telerik team

[Khushali]

Thanks Rosen. That solved the problem.

Can you tell me, is there any way to retrieve the column data of the grid? I want the data of some of the columns of the grid. Is it possible to get column object?

[Rosen]

Hi Khushali,

Could you please specify what do you mean by column data? It is the column declaration settings or the data in the particular cell?

All the best,
Rosen
the Telerik team

[Khushali]

Hi Rosen,

I meant the cell datas. I wanted to get separate column objects, giving the field keys. But I dont know if i can do that in Kendo Grid. I have used such thing while working in YUI2. There we can get row objects as well as column objects. Can we get in Kendo also? For now, i get all the "tr" elements and then get the "td" values using index. But, that is not a proper way. So, want a good solution to retrieve all the cell data of a column.

Regards,
Khushali

[Rosen]

Hello,

In order to get the data record associated with a given row, you may use Grid's dataItem method passing the row element. Then you can access the appropriate fields of the record.

All the best,
Rosen
the Telerik team