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 🙂

Advertisements

2 thoughts on “Auto Refresh Of Kendo Grid

  1. do you know how to implement this using the HTML helpers. for example. sorry for the huge paste

    @(Html.Kendo().Grid()
    .Name(“Grid”)
    .Columns(columns =>
    {
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(140);
    columns.Bound(p => p.UnitsInStock).Width(80);
    columns.Bound(p => p.Discontinued).Width(80);
    columns.Command(command =>
    {
    command.Destroy();
    }).Width(110);
    })
    .ToolBar(toolbar =>
    {
    toolbar.Create();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
    .SignalR()
    .AutoSync(true)
    .Events(events => events.Push(@
    function(e) {
    var notification = $(“#notification”).data(“kendoNotification”);
    notification.success(e.type);
    }
    ))
    .PageSize(10)
    .Transport(tr => tr
    .Promise(“hubStart”)
    .Hub(“hub”)
    .Client(c => c
    .Read(“read”)
    .Create(“create”)
    .Update(“update”)
    .Destroy(“destroy”))
    .Server(s => s
    .Read(“read”)
    .Create(“create”)
    .Update(“update”)
    .Destroy(“destroy”)))
    .Schema(schema => schema
    .Model(model =>
    {
    model.Id(m => m.ProductID);
    model.Field(m => m.ProductID).Editable(false);
    })
    )
    )
    )

  2. i have used same idea for auto refresh but i need the data to be refreshed for every 2 minutes apart from these refresh interval. Would it be possible to do it being given auto refresh also ???

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s