Reputation: 5041

Reloading/refreshing Kendo Grid

How to reload or refresh a Kendo Grid using Javascript?

It is often required to reload or refresh a grid after sometime or after a user action.

Upvotes: 189

Answers (29)

Wellspring

Reputation: 1340

Piling on with an observation. Zachary Dow gave me some interesting to work with. I took at face value the common suggestion of:

var grid = $("#grid");
grid.data("kendoGrid").dataSource.read();
grid.data("kendoGrid").dataSource.refresh();

My experience (YMMV) was that the refresh took place, but the spinner didn't work. Data just refreshed after a 2-second visual desert of nothing. I then tried this:

var grid = $("#grid");
kendo.ui.progress(grid, false);
grid.data("kendoGrid").dataSource.read();
grid.data("kendoGrid").dataSource.refresh();
kendo.ui.progress(grid, true);

That accomplished nothing.

Then, thanks to Zachary's observation, I tried something like this.

var grid = $("#grid");
kendo.ui.progress(grid, true);
grid
  .data("kendoGrid")
  .dataSource
  .read()
  .then(function() {
    kendo.ui.progress(grid, false);
  });
grid.data("kendoGrid").refresh();
}

(I'm going by memory here, so a step in this progress might be off.)

That had the interesting effect of producing two spinners.

At this point I tried another person's answer from this post, and removed all the bling. (And I'll get to my point.)

var grid = $("#grid");
grid.data("kendoGrid").dataSource.read();

That did the trick. So this is a long story with the same punchline. My problem turned out to be the refresh() call. Remove it, and I got a refresh with a function spinner.

Upvotes: 2

Triloknath Nalawade

Reputation: 11

common js function for refresh kendo grid

function refreshKendoGrid(id) {
var grid = $("#" + id).data("kendoGrid");
if (grid) {
    grid.dataSource.read();
}

}

Upvotes: 0

Ali Soussi

Reputation: 1

$('#GridName').data('kendoGrid').dataSource.read(); //first you have to read the datasource data $('#GridName').data('kendoGrid').refresh(); // after that you can refresh

Upvotes: -3

Georgi Yankov

Reputation: 441

I see that a lot of answers here suggest calling both dataSource.read and grid.refresh, however, internally the grid listens for dataSource changes and upon a change it will refresh itself. In other words executing both dataSource.read and grid.refresh will result in refreshing the grid twice, which is unnecessary. Calling just dataSource.read is enough.

Upvotes: 2

Severin

Reputation: 183

My solution is:

var gridObj = $('#GridName').data('kendoGrid');
gridObj.dataSource.read();
gridObj.refresh();

Works also for other object functions

Upvotes: -2

Purna Pilla

Reputation: 659

I never do refresh.

$('#GridName').data('kendoGrid').dataSource.read();

alone works for me all the time.

Upvotes: 65

sajadre

Reputation: 1181

You can also refresh your grid with sending new parameters to Read action and setting pages to what you like :

var ds = $("#gridName").data("kendoGrid").dataSource;
ds.options.page = 1;
var parameters = {
    id: 1
    name: 'test'
}
ds.read(parameters);

In this example read action of the grid is being called by 2 parameters value and after getting result the paging of the grid is in page 1.

Upvotes: 4

Jaimin

Reputation: 8020

You can use

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

Upvotes: 340

jishuraajnath

Reputation: 11

The easiest way out to refresh is using the refresh() function. Which goes like:

$('#gridName').data('kendoGrid').refresh();

while you can also refresh the data source using this command:

$('#gridName').data('kendoGrid').dataSource.read();

The latter actually reloads the data source of the grid. The use of both can be done according to your need and requirement.

Upvotes: 1

Ashraful Islam

Reputation: 7

$("#grd").data("kendoGrid").dataSource.read();

Upvotes: -3

Zachary Dow

Reputation: 1947

Not a single one of these answers gets the fact that read returns a promise, which means you can wait for the data to load before calling refresh.

$('#GridId').data('kendoGrid').dataSource.read().then(function() {
    $('#GridId').data('kendoGrid').refresh();
});

This is unnecessary if your data grab is instant/synchronous, but more than likely it's coming from an endpoint that won't return immediately.

Upvotes: 23

sonyisda1

Reputation: 434

If you are desiring the grid to be automatically refreshed on a timed basis, you can use the following example which has the interval set at 30 seconds:

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         setInterval(function () {
            var grid = $("#GridName").data("kendoGrid");
            grid.dataSource.read();
         }, 30000);
      });
   </script>

Upvotes: 3

Kunvar Singh

Reputation: 1885

You may try:

    $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

Upvotes: 4

oopsdazie

Reputation: 761

I used Jquery .ajax to get data. In order to reload the data into current grid, I need to do the following:

.success (function (result){
    $("#grid").data("kendoGrid").dataSource.data(result.data);
})

Upvotes: 6

Faran Shabbir

Reputation: 423

In order to do a complete refresh, where the grid will be re-rendered alongwith new read request, you can do the following:

 Grid.setOptions({
      property: true/false
    });

Where property can be any property e.g. sortable

Upvotes: 4

AndyMcKenna

Reputation: 2647

I want to go back to page 1 when I refresh the grid. Just calling the read() function will keep you on the current page, even if the new results don't have that many pages. Calling .page(1) on the datasource will refresh the datasource AND return to page 1 but fails on grids that aren't pageable. This function handles both:

function refreshGrid(selector) {
     var grid = $(selector);
     if (grid.length === 0)
         return;

     grid = grid.data('kendoGrid');
     if (grid.getOptions().pageable) {
         grid.dataSource.page(1);
     }
     else {
         grid.dataSource.read();
     }
}

Upvotes: 6

parvezalam khan

Reputation: 490

The default/updated configuration/data of the widgets is set to automatically bind to an associated DataSource.

$('#GridId').data('kendoGrid').dataSource.read();
$('#GridId').data('kendoGrid').refresh();

Upvotes: 2

Ignas Paplauskas

Reputation: 101

Actually, they are different:

$('#GridName').data('kendoGrid').dataSource.read() refreshes the uid attributes of the table row
$('#GridName').data('kendoGrid').refresh() leaves the same uid

Upvotes: 10

Kristy Kavada

Reputation: 113

You can always use $('#GridName').data('kendoGrid').dataSource.read();. You don't really need to .refresh(); after that, .dataSource.read(); will do the trick.

Now if you want to refresh your grid in a more angular way, you can do:

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

vm.gridOptions.dataSource.read();

And don't forget to declare your datasource as kendo.data.DataSource type

Upvotes: 5

Brownbagger11

Reputation: 83

$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);

Upvotes: 3

vineel

Reputation: 3683

An alternative way to reload the grid is

$("#GridName").getKendoGrid().dataSource.read();

Upvotes: 5

Amit Kapoor

Reputation: 201

In my case I had a custom url to go to each time; though the schema of the result would remain the same.
I used the following:

var searchResults = null;
$.ajax({
        url: http://myhost/context/resource,
        dataType: "json",
        success: function (result, textStatus, jqXHR) {
            //massage results and store in searchResults
            searchResults = massageData(result);
        }
    }).done(function() {
        //Kendo grid stuff
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#doc-list-grid').data('kendoGrid');
        dataSource.read();
        grid.setDataSource(dataSource);
    });

Upvotes: 8

Jatin Patel

Reputation: 65

By using following code it automatically called grid's read method and again fill grid

$('#GridName').data('kendoGrid').dataSource.read();

Upvotes: 5

Milan

Reputation: 3013

What you have to do is just add an event .Events(events => events.Sync("KendoGridRefresh")) in your kendoGrid binding code.No need to write the refresh code in ajax result.

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(model => model.Id(m => m.Id))        
    .Events(events => events.Sync("KendoGridRefresh"))    
    )
      .Columns(columns =>
      {
          columns.Bound(c => c.Id).Hidden();              
          columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);                           
      }).Events(e => e.DataBound("onRowBound"))
          .ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))
          .Sortable()          
          .HtmlAttributes(new { style = "height:260px" })          
  )

And you can add the following Global function in any of your .js file. so, you can call it for all the kendo grids in your project to refresh the kendoGrid.

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}

Upvotes: 8

user2951849

Reputation: 111

Just write below code

$('.k-i-refresh').click();

Upvotes: 3

Oxon

Reputation: 5041

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

Upvotes: 33

Nitin Rawat

Reputation: 89

You can use the below lines

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

For a auto refresh feature have a look here

Upvotes: 5

asuciu

Reputation: 1264

In a recent project, I had to update the Kendo UI Grid based on some calls, that were happening on some dropdown selects. Here is what I ended up using:

$.ajax({
        url: '/api/....',
        data: { myIDSArray: javascriptArrayOfIDs },
        traditional: true,
        success: function(result) {
            searchResults = result;
        }
    }).done(function() {
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#myKendoGrid').data("kendoGrid");
        dataSource.read();
        grid.setDataSource(dataSource);
    });

Hopefully this will save you some time.

Upvotes: 32

d.popov

Reputation: 4255

If you do not want to have a reference to the grid in the handler, you can use this code:

 $(".k-pager-refresh").trigger('click');

This will refresh the grid, if there is a refresh button. The button can be enabled like so:

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

Upvotes: 10

Reloading/refreshing Kendo Grid

Answers (29)

Related Questions