Kendo Grid MVVM Refresh/Reload Button

[Nick]

So I have an MVVM Grid set up and a toolbar with a button intended to refresh the grid data within the current view.

When searching for grid refresh functionality I came across this thread on stack : (http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid)

Which recommends using:

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

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

In the button's click handling method these calls return an error and when I console.log($('#GridName').data('kendoGrid'));

it returns 'undefined'.

I have looked for read() and refresh() method in the grid object and have not found either in the grid or the dataSource etc.

What is the proper way to call refresh/reload on an MVVM Grid?

[Boyan Dimitrov]

Hello Nick,

 

Could you please confirm that "GridName" is the id value of the div element used to initialize the Kendo UI Grid widget. 

 

Could you please extract a runnable sample in a Kendo UI Dojo and we will be happy to help.

Regards,
Boyan Dimitrov
Telerik

 

 

[Nick]

Hi Boyan,

Yes I can confirm that I am correctly setting the id in the jQuery calls. As I stated in the question, $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

are recommended by the Stack Overflow thread as the way to refresh a grid, but I have not been able to find any information on the correct way to call a refresh on a MVVM built grid.

 The problem with the above calls is that the call ".data("kendoGrid")" returns undefined. Please see attached screenshot for breakdown of the object returned from calling

console.log($('#contents'));
console.log($('#contents').data('kendoGrid'));​

(the actual id of my grid is contents)

We do not have our data source for our grid stored in a bound function/variable named data, rather it is in "breakDetailsSource" which I assume is a big part of this issue, but I'm not really sure. Here's the (relevant) VM code for context.

 

<code>
var breakDetailsModel = kendo.observable({
        reqUrl:"",  
        formulatedUrl:"",
        
        breakDetailsSource: function(e) {
            var self = this;
            return new kendo.data.DataSource({
                type: "JSONP",
                transport: {
                  read: {
                    url: self.get("formulatedUrl"),
                  },
                },
                schema : {
                    data : "xdata.rows",

..........

</code>

[Nick]

I have a parallel question on stack here: http://stackoverflow.com/questions/32763574/kendo-ui-mvvm-grid-refresh-reload
So $("div[data-role='grid']").data("kendoGrid");  gets an object with a columns attribute and data attribute, all the stuff described in the usual Kendo docs.

Refresh works via:

$("div[data-role='grid']").data("kendoGrid").dataSource.read();
                $("div[data-role='grid']").data("kendoGrid").refresh();

However, it grabs the first grid it sees in the DOM, so this is not particularly helpful as I am trying to put a refresh button on the second grid on my page.

[Nick]

Figured it out, for anyone in the future who may need this:

 Loop through each grid on the page and call the refresh on the right one.

$("div[data-role='grid']").each(function(){
                    if( $(this)[0].id == "theGridID"){
                        $(this).closest("div[data-role='grid']").data("kendoGrid").dataSource.read();
                        $(this).closest("div[data-role='grid']").data("kendoGrid").refresh();
                    }
                });