Kendo ui grid expand detailini row after refreshing the grid

Question

I know this question has been posted a few times, and i´ve been reading about those solutions, but i need some help figuring out what am i missing.

What i want is the master grid to expand the last expanded row after a READ call, so i´ve read this and also this but nothing seems to work, my code is this:

detailExpand: function (e) 
{
  var grid = $("#gridTimesheets").data("kendoGrid");
  expandedRowUid = e.masterRow.data('uid');
}

then on my master databound function i have this:

dataBound: function(e) 
{
  this.expandRow($('tr[data-uid=' + expandedRowUid + ']'));
}

the only thing that seems to expand the rows after the refresh is this:

this.expandRow(this.tbody.find("tr.k-master-row"));

but it expands all rows, i want only the last row before the READ method.

What am i missing here?

Answer 1

Note that anytime data is rendered, all uids are re-created. So you can't store an old uid, because it will be lost. I suggest you to store the row index:

detailInit: function(e) {
    $(e.detailCell).text("inner content");
    lastRowIndex = $(e.masterRow).index(".k-master-row");
}

Then find the row by index inside the dataBound:

dataBound: function() {
    var row = $(this.tbody).find("tr.k-master-row:eq(" + lastRowIndex + ")");
    this.expandRow(row);
}

Demo

Answer 2

Add javascript function to expand button on DataBound function

 function dataBound() {
    this.tbody.find("tr.k-master-row td a.k-i-expand").attr('onclick','SetWidthOnExpand()')
}

 function SetWidthOnExpand() {
   setTimeout(function () {
        $('.k-header').removeAttr('style');
        $('.k-selectable tbody tr td').removeAttr('style');
    },1000)
}