CODEWITHSUNDEEP
kendo-uikendo-gridkendo-ui-angular2
Federico
Federico

Reputation: 404

How to open and close the detailtemplate programmatically?

I have 3 columns, and therefore 3 cells in which I have a button.

At the click of the button I would like to open / close the detail template

Without having the + icon on the left

HTML:

<kendo-grid-column field="info" title="info">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button mat-button (click)="clickInfoCell()">
        </button>
    </ng-template>
</kendo-grid-column>

<ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex">
     // DETAIL TEMPLATE BODY
</ng-template>

TS:

public onCellClick(event: CellClickEvent){
    this.myEvent= event;
}

//toggleTemplate
public clickInfoCell(){
    //Close previous template
    //Open detail template
}

thanks

Upvotes: 1

Views: 1066

Answers (1)

Shai
Shai

Reputation: 3882

There's actually a built-in mechanism with dedicated directives for this purpose.

Template:

<kendo-grid
    [kendoGridBinding]="gridView"
    [kendoGridExpandDetailsBy]="expandDetailsBy"
    [(expandedDetailKeys)]="expandedDetailKeys"
></kendo-grid>

Component:

public expandedDetailKeys: any[] = [1];
public expandDetailsBy = (dataItem: any): any => {
    return dataItem.ProductID;
};

You can read about the mechanism here.

You can see a working demo in StackBlitz here.

Upvotes: 1

Related Questions