0

These solutions (Reloading/refreshing Kendo Grid)

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

do not work for a Kendo MVVM grid. Specifically $('#GridName').data('kendoGrid') returns 'undefined'.

My question is: what method could be used to trigger a grid refresh/reload via a button controller in Kendo UI MVVM grid?

Community
  • 1
  • 1
Nick S
  • 57
  • 6
  • What is the `id` of your grid? – chiapa Sep 24 '15 at 16:16
  • in the above example it would be 'GridName' – Nick S Sep 24 '15 at 16:42
  • For that to return as `undefined` it's because no grid is defined in the HTML with an id "GridName". Can you show more code, HTML and scripts? – chiapa Sep 25 '15 at 08:03
  • Hi chiapa, thank you for the response. I'm going to pause you because you are going down the wrong track for the answer to this query, though wholly understandably. The reason is not because the grid is undefined, it is the structure of the object created by the Kendo grid using the MVVM framework. It's not the "$('#GridName')" that is undefined, it is the ".data('kendoGrid')" which is undefined. The object structure is different from the standard jQuery grid object. – Nick S Sep 25 '15 at 14:22
  • That is the nature of this question, the kendo documentation and all associated forum threads that I can find only address refreshing/reloading a grid built using the jQuery framework for the grid, and as such point towards grid".data(...)" objects and functions. I am trying to find the approach to refresh/reload in a MVVM grid which does not have the same objects and functions structurally. It is possible that the refresh/reloading that I am looking for is not supported in MVVM, but I have not seen that explicitly stated anywhere. – Nick S Sep 25 '15 at 14:22
  • Oh, I get it now. Can [this](http://jsfiddle.net/Ms3nn/555/) help? Use `$("div[data-role='grid']").data("kendoGrid").dataSource.read();` – chiapa Sep 25 '15 at 14:40
  • That's actually really close, it appears that it reads the first grid, is there anyway to customize that call to also use an id? – Nick S Sep 25 '15 at 18:46
  • For context, I have removed the other elements from the page, and called $("div[data-role='grid']").data("kendoGrid") to look through the object in the console, and there is a .dataSource object, but no read function. – Nick S Sep 25 '15 at 18:50
  • You can get the element's id from `var something = $("div[data-role='grid']").data("kendoGrid");` What have you got now? – chiapa Sep 28 '15 at 08:17
  • So I was finally able to get to test this: $("div[data-role='grid']").data("kendoGrid"); This is getting the grid data the way kendo usually recommends, but working with the MVVM. In order to get this to work however I had to remove a grid from the page as it was grabbing the first grid that it found. Can you describe the difference between $("div[data-role='grid']") and $('#theCorrectID') and why they are returning different objects? Is it a matter of timing? (the grid loading vs the grid not loaded yet) – Nick S Sep 29 '15 at 15:56
  • chiapa, you got the answer, put your next post as an answer for best answer/credit. With the caveat that it grabs the first grid it sees (still looking for a solution to my specific problem which is a refresh button in the second grid on a page). But you definitely found the answer to my OP as written so claim your credit! :) – Nick S Sep 29 '15 at 16:09
  • Nick, I'm not sure why `$("div[data-role='grid']")` and `$('#theCorrectID')` return different objects. As for having multiple grids, I guess you could have them and insert something specific before the `div[data-role]` part in order to grab the exact grid you want – chiapa Sep 29 '15 at 16:32
  • yep, I wound up using an each loop and compared id's. I think it may be an initialization issue, though not sure why the object structure would change.. anyway thanks for the answers! – Nick S Sep 29 '15 at 18:19

2 Answers2

0

Here's a solution for MVVM that allows you to refresh the dataSource of the Kendo grid. If it's the only grid on the page, the solution works fine:

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

Here is an example fiddle

chiapa
  • 4,362
  • 11
  • 66
  • 106
0

$('#id').data('kendoGrid') return 'undefined' when grid is not initialized. If $('#id') is not empty and grid is visible on page data can't be undefined. You should check your jquery selector or init grid if it not visible at page.

layonez
  • 1,746
  • 1
  • 16
  • 20