angularkendo-gridkendo-ui-angular2angular-kendo

How to create a Custom function like edit, save on Kendo-angular-grid to get selected row data


I want to create a custom method on angular-kendo-grid like inbuilt method edit, remove, save, cancel to get the current selected row data to angular component.

I want to create custom method for CloseQuestion(). cloneQuestion(gridView) is sending the whole list of grid data rather than the selected row data.

<kendo-grid-command-column title="Clone  |  Edit  |  Delete" width="50">
      <ng-template kendoGridCellTemplate let-isNew="isNew">
        <button (click)="cloneQuestion(gridView)"><i class="glyphicon glyphicon-copy"></i></button>
        <button kendoGridEditCommand><span class="glyphicon glyphicon-pencil"></span></button>
        <button kendoGridRemoveCommand><span class="glyphicon glyphicon-trash"></span></button>
        <button kendoGridSaveCommand [disabled]="formGroup?.invalid"><span class="glyphicon glyphicon-download-alt"></span></button>
        <button kendoGridCancelCommand><span class="glyphicon glyphicon-trash"></span></button>
      </ng-template>
</kendo-grid-command-column>

Solution

  • You can access the data item with

    <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
    

    Which you can then access in your events by using

    <button (click)="closeQuestion(dataItem)">HELLO</button>
    

    A working demo is available here