Opening the kendoDetailTemplate programmatically

Question

I have a grid with the detail template functionality. I would like to not have the expand +/ - and open this template myself, either on selection of the row, or a link on one of the columns on my grid.

Is there a way of doing this? Can i call whatever kendo use to open up this template myself? Something like this?

<kendo-grid
    [data]="gridView | async"
    [skip]="skip"
    [scrollable]="'virtual'"
    [selectable]="true"
    [pageSize]="pageSize"
    [height]="600"
    [rowHeight]="36"
    [detailRowHeight]="36"
    (pageChange)="pageChange($event)">
    <kendo-grid-column field="clientID" title="ID" width="80">
        <template kendoCellTemplate let-dataItem>
            <button class="btn btn-link" (click)="expandDetail()">{{dataItem.clientID}}</button>
        </template>
    </kendo-grid-column>
<template kendoDetailTemplate let-dataItem>
      My Very interesting details go here ...
</template>
</kendo-grid>

Answer 1

You can expand all rows programatically by handling the OnDataBoundEvent.

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

In case you want to collapse it back, please use

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

And if you just want to initialize the detail template, you can expand and collapse at the same time.

Answer 2

At this time the grid component does not support such an API. This is logged for implementation and can be tracked in this GitHub issue.

Answer 3

This can (now? - not sure how long it's been available- only been working with the kendo angular grid for a few days) be accomplished progromatically in a similar way as the first answer given using jQuery:

// using cell click event in template
cellClickHandler({ sender, rowIndex, columnIndex, dataItem, column }) {

    sender.collapseRow(rowIndex);  // close

    // OR

    sender.expandRow(rowIndex);   // open
}