MVC Kendo UI Grid - call function after all the rows have been expanded - asp.net-mvc

Question

I am using the ASP.NET MVC Kendo grid.
On click of a button, I need to expand all the rows.
Here is the code for the same:
var row = $(this).closest("tr.k-master-row");
grid.data("kendoGrid").expandRow(row);
Where this and grid have been defined. This works well.
On expand of each row, the following event is called (for each row), as the detail template is bound:
.Events(events => events.DataBound("onInnerGridDataBound"))
function onInnerGridDataBound(e) {
//Do something here
}
My requirement is that after I initiate the call to expand all the rows, I have a few lines in the code, which should be executed only after all the rows have been expanded. So,
function expandAll()
{
var row = $(this).closest("tr.k-master-row"); //Step1
grid.data("kendoGrid").expandRow(row);"); //Step2
//Do something after the onInnerGridDataBound event is called for
every expanded row.
..................................
//Ideally should be step 4 to be executed, but executes immediately
//after step2
}
//Ideally Step 3 to execute, but executes last
function onInnerGridDataBound(e) {
//Do something here
}
I want to avoid using the setTimeout method, as I don't know how long it will take or any flags.
Hope to find an answer soon.
Thanks!

Answer 1

Have you tried this?
Not sure if it'd work here but it should be something like:
$.when(grid.data("kendoGrid").expandRow(row))
.done(function () {
//after completing expandRow event
})
.then(function() {
//something else
});
Again, this may not work at all since I'm not sure if kendoGrid events can be treated as deferred objects but it's worth a shot.