This is a migrated thread and some comments may be shown as answers.

Kendo Grid MVVM Refresh/Reload Button

4 Answers 548 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 24 Sep 2015, 03:14 PM

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?

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 Sep 2015, 09:13 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nick
Top achievements
Rank 1
answered on 28 Sep 2015, 01:55 PM

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>
0
Nick
Top achievements
Rank 1
answered on 29 Sep 2015, 04:06 PM

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.

0
Nick
Top achievements
Rank 1
answered on 29 Sep 2015, 06:16 PM

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();
                    }
                });

Tags
Grid
Asked by
Nick
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Nick
Top achievements
Rank 1
Share this question
or