Refreshing a KendoUI Grid using OData, Popups and Durandal.js

Question

While I've seen various versions of this kind of error before, I have yet to see one with Durandal involved, which is where I think some of the issues are coming from.

I have a KendoUI grid where I display a number of Expenses, and I use a Durandal message box to add a new expense and the idea is that on submission of the new expense, the grid should refresh.

Now, several people have mentioned the following "solution":

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

Unfortunately, this doesn't seem to work. While I am using a popup, because I'm using Durandal my code to refresh the grid is still within the page that the grid is on due to Durandal's promise methodology.

app.showDialog('viewmodels/empresas/egreso/addEgreso').then(function () {
    //the method called that uses the code above to attempt to refresh the grid
    refreshGrid();
});

Everytime it reaches the refreshGrid method, an error comes back saying that "grid" is not defined. How can I reach the grid property to refresh it after adding a new item to the database?

Any help would be greatly appreciated.

Answer 1

I recommend assigning the grid to an observable in the grid property object:

view:

div data-bind="kendoGrid: myGrid"> /div

viewmodel:

var myGridObservable = ko.observable();

var myGrid = { widget: myGridObservable, data: null, dataSource: {...

then pass the myGridObservable to your view and you can do:

myGrid().dataSource.read();