Kendo angular grid column pass dataitem in ng-template

Question

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.

score 7 · Accepted Answer · answered Jun 12 '18 at 12:11

7

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>

answered Jun 12 '18 at 12:11

Philipp

1,784
1
15
19

I am just curious what is the `let-...` syntax? Is it possible to read about it somewhere? It seems that I have met the explanation of the `let-...` in the documentation, but cannot find it anymore. – Sasuke Uchiha Aug 26 '20 at 10:36
@SasukeUchiha The [ngTemplateOutlet Docs](https://angular.io/api/common/NgTemplateOutlet#description) has an example. But basically everything you pass into the `context` is available to be accessed via `let-`. As for kendo, they are doing a pretty good job with their documentation, so you should see what's available over there. – Philipp Aug 26 '20 at 10:50
Got it. Thank you. – Sasuke Uchiha Aug 26 '20 at 11:01
How would I access `dataItem` in `kendo-grid-command-column`? I want use 'dataItem` for conditional styling. – hirani89 Apr 16 '21 at 04:51
@hirani89 You cannot access the `dataItem` directly inside the `kendo-grid-command-column`. You always need to use a `ng-template` with the `kendoGridCellTemplate` directive as shown in my sample. – Philipp Apr 16 '21 at 05:31
@Philipp Thanks for the advice. Please have a look at https://stackoverflow.com/questions/67157360/angular-10-kendoui-access-dataitem-outside-ng-template – hirani89 Apr 19 '21 at 07:04

Kendo angular grid column pass dataitem in ng-template

1 Answers1