Month: March 2014

Auto Refresh Of Kendo Grid

Many Times we need to perform Update operations in a Kendo Grid through different possible editing options i.e Inline,popup. After editing we need to see the latest data with the updated result set. For achieving this functionality Auto Refresh is a good solution .

Auto Refresh has many benefits like :

> It handles the Dirty Read problem.

> Provides a check for to be sure that the edited data is properly saved.

But Auto Refreshing is not an inbuilt feature of kendo Grid. In this post I will be throwing some light on how to achieve it .

Setup :

We have a div in HTML which we are converting to a kendo grid through jquery as below.

   Untitled3

In this grid we are performing the Edit operations .

To achieve the auto refresh we will call a method (RefreshGrid) having auto refresh logic just after the creation of the kendo grid.

Refresh Interval:

We will define a global variable that will tell the refresh interval

Untitled2

Auto Refresh Method :

//Function For Initiating The grid refresh

Untitled1

This is how you can achieve kendo grid refreshing when your grid is not editable.

Scenario : Kendo Grid  is Editable

in case your grid is editable then you have to stop the Auto refreshing of the grid for the duration of the editing process otherwise if the refresh cycle comes in between the editing process your changes will be lost . This can be resolved by a small change.

Declare a global variable isEditing and set it to false initially.

var isEditing = false;

when the editing in the kendo grid starts just set this variable to true and when it ends set it to false again. You can use edit and update functions of kendo grid for implementing it.

After handling the isEditing variable you have to change your RefreshGrid method as below:

Untitled

This way the kendo grid can be refreshed again and again after a specified time interval.

Keep Exploring Keep Learning 🙂