Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 514
Karan Avatar asked Mar 06 '23 00:03

Karan


1 Answers

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>
like image 78
Philipp Avatar answered Mar 20 '23 01:03

Philipp