Check for detail row in kendo grid

Question

I use a kendo grid which has a subgrid that is collapsed until the user decides to deselect it. In order to make sure the user doesn't get the option to unfold a row that has no data in the subgrid, I would want to check each row for child-data. If the data is there, an arrow should appear, if not then not.

In order to couple the two grids together I'm using

.ClientDetailTemplateId("MyTemplate")

The code I want to run looks something like this

function dataBound(e) {
    var grid = e.sender;

    var gridData = grid.dataSource.view();
    expandGridDetailsSystem(e);

    for (var i = 0; i < gridData.length; i++) {
        //get the item uid
        var currentUid = gridData[i].uid;
        var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
        var detailRow = currentRow.next(".k-detail-row");

        if (!detailRow) {
            //remove the expand button
            $(currentRow).find(".k-hierarchy-cell a").removeClass("k-icon k-i-expand");
        }
    }
    collapseGridDetailsSystem(e);
}

if (!gridData[i].HasSubGrid) is what I would like to save the boolean to. The problem is that I have no idea how to check for a k-detail-cell. Especialy seen the default is collapsed.

To be clear, I want to find if the current row has a child-row and if so alter the HasSubGrid element before the if-statement is executed.

Any help on the matter would be greatly appreciated. If more information is needed, feel free to ask.

Answer 1

If I'm not wrong, if you activate the detail templates, all rows will have an expand arrow to show the details, no matter if it has details or not. It is an old issue in my opinion(check here and here) since you have to fix it by yourself in the dataBound event, which is kind of ugly. Given that, all your rows will have a sibling detail row guaranteed which is hidden until the master row is expanded.

In other words, for each tr.k-master-row in your grid(which is in fact the displayed row with data) it will have a tr.k-detail-row next to it, like:

<tr class='k-master-row'></tr>
<tr class='k-detail-row'></tr>
<tr class='k-master-row'></tr>
<tr class='k-detail-row'></tr>

So you can do...

var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']"),
    detailRow = currentRow.next('.k-detail-row');

to have the detail row.

One important detail is that the detail contents are only renderen once the main row is expanded. So you won't be able to manage any element in the detail prior to it's rendering.