CODEWITHSUNDEEP
angularkendo-ui
moris62
moris62

Reputation: 1045

how to get grid's row data when in cell button is clicked

I have a Kendo grid

<kendo-grid [data]="gridData">
  <kendo-grid-column field="iban" title="IBAN">
  </kendo-grid-column>
  <kendo-grid-command-column title="command">
    <ng-template kendoGridCellTemplate>
      <button class="btn btn-success" (click)="btnCommand($event)">Approve</button>
    </ng-template>
  </kendo-grid-command-column>
</kendo-grid>

At the moment, the Approve button is just posting the event click event, how can it post the whole row data?

Here is the event handler

btnCommand($event) {
  console.log($event)
}

Upvotes: 1

Views: 1388

Answers (1)

Barremian
Barremian

Reputation: 31125

You could pass in arguments to the <ng-template> tag using it's let signature. And send it back to the event handler as it's argument.

Try the following

<ng-template kendoGridCellTemplate let-data>
  <button class="btn btn-success" (click)="btnCommand(data)">Approve</button>
</ng-template>

Event handler:

public btnCommand(data: any) {
  console.log(data);
}

Update: Additional buttons

If you need to have additional buttons with different event handling behaviors, it's better to bind different event handlers.

Template (*.html)

<ng-template kendoGridCellTemplate let-data>
  <button class="btn btn-success" (click)="onApprove(data)">Approve</button>
  <button class="btn" (click)="onDecline(data)">Decline</button>
</ng-template>

Controller (*.ts)

public onApprove(data: any) {
  console.log(data);
  // do something else
}

public onDecline(data: any) {
  console.log(data);
  // do something else
}

Upvotes: 2

Related Questions