angularkendo-uikendo-ui-angular2kendo-ui-gridangular-kendo

Kendo angular grid column pass dataitem in ng-template


I am using Angular 5.2 with Kendo controls. Inside the grid i have a button with a click property. I want to pass the PID value into the showwindow function as a parameter.

Here is the code sample:-

 <kendo-grid [data]="gridView"
                (pageChange)="pageChange($event)"
                [selectable]="true"
                [kendoGridSelectBy]="mySelectionKey"
                [selectedKeys]="mySelection"
                style="width:1100px;">
        <kendo-grid-checkbox-column showSelectAll="true" width="50" media="(min-width: 10px)">
            <ng-template kendoGridHeaderTemplate let-dataItem>
                <input type="checkbox"
                       name="selectAll"
                       (change)="selectAllRows($event)"
                       [checked]="allRowsSelected" />
            </ng-template>
        </kendo-grid-checkbox-column>
        <kendo-grid-column field="PID" title="User ID" width="150" media="(min-width: 10px)">
        </kendo-grid-column>

        <kendo-grid-command-column title="View file" width="200" media="(min-width: 10px)">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button (click)="showwindow(pass the PID value here)">
                    <img src="../../../../../Images/view.png" />
                </button>
            </ng-template>
        </kendo-grid-command-column>
    </kendo-grid>

Here is the button click handler i want to change :-

 <button (click)="showwindow(pass the PID value here)">
     <img src="../../../../../Images/view.png" />
  </button>

Please suggest the solution.


Solution

  • You can access the current rows dataItem(and other variables) via the template-context of the kendoGridCellTemplate directive. (API Reference)

    <kendo-grid-command-column ...>
        <ng-template kendoGridCellTemplate let-dataItem>
            <button (click)="showwindow(dataItem.PID)">
                <img src="../../../../../Images/view.png" />
            </button>
        </ng-template>
    </kendo-grid-command-column>