Kendo grid table expand removes table data

Question

We have a function that is being used to expand all rows in a kendo grid if they have a subgrid. Currently this is indicated by having an arrow. This arrow is used in the code to search for so it knows how to expand the grid.

(function () {
$(".k-grid-header .k-hierarchy-cell").html(
    "<div>" +
        "<span class=\"k-icon k-i-arrow-60-right grid-expand pointer link\" title=\"Expand all\"></span>" +
    "</div>");
$(".grid-expand").click(expandGridDetails);
});

function expandGridDetails() {
    var grid = $(".k-grid").data("kendoGrid");
    grid.expandRow(grid.tbody.find(".k-master-row").has(".k-hierarchy-cell a.k-icon"));
}

For one of the grids this works perfectly, however for the second grid this function will not expand the rows and instead remove some of the data represented in the detailRow.

The problem seems to occur as soon as the grid.expand() method is executed. If I do anything else such as the grid.tbody.find-statement, the table will stay intact. Using grid.collapseRow() is causing the same thing to happen, not executing but instead removing some of the data. The master-rows stay completely intact throughout the process.

Does anyone have an idea about what might be the cause of this bug?

Answer 1

A senior programmer explained to me what I was doing wrong and I fixed it with his solution. With $(".grid-expand") the code was calling the first grid every single time, even after selecting a row in another grid. The solution is to save a global variable which keeps track of the grid that is currently being viewed. Backdraw is that this global variable would cause problems when the same page is opened multiple times by the same user, but I see no reason to prioritize a solution for this small issue.

Another solution is to use

function expendGridDetails(e) {
   var grid = e.sender;
}

The downside to this is that the e variable won't automatically be send to each of the functions. I'm not sure yet as to what determines if they do or don't receive this variable, but it's saver than using a global variable which may not be set to the correct value. e.sender asks the grid that is calling the function for it's name. Or at least that's in wide terms what I understood from the explanation given to me.