Элемент данных передачи столбца угловой сетки Kendo в ng-template

Я использую Angular 5.2 с элементами управления Kendo. Внутри сетки у меня есть кнопка со свойством click. Я хочу передать значение PID функции showwindow в качестве параметра.

Вот пример кода: -

 <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>

Вот обработчик нажатия кнопки, который я хочу изменить: -

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

Пожалуйста, предложите решение.


angular kendo-ui kendo-ui-angular2 kendo-ui-grid angular-kendo
person Karan    schedule 12.06.2018    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете получить доступ к текущим строкам dataItem (и другим переменным) через контекст шаблона директивы kendoGridCellTemplate. (Справочник по API)

<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>
person Philipp    schedule 12.06.2018
comment
Мне просто любопытно, что такое синтаксис let-...? Можно ли где-то об этом прочитать? Кажется, я встречал объяснение let-... в документации, но больше не могу найти. - person Sasuke Uchiha; 26.08.2020
comment
@SasukeUchiha В документах ngTemplateOutlet есть пример. Но в основном все, что вы передаете в context, доступно для доступа через let-. Что касается кендо, они неплохо справляются со своей документацией, так что вы должны посмотреть, что там доступно. - person Philipp; 26.08.2020
comment
Понятно. Спасибо. - person Sasuke Uchiha; 26.08.2020
comment
Как мне получить доступ к dataItem в kendo-grid-command-column? Я хочу использовать dataItem для условного стиля. - person hirani89; 16.04.2021
comment
@hirani89 Вы не можете получить доступ к dataItem непосредственно внутри kendo-grid-command-column. Вам всегда нужно использовать ng-template с директивой kendoGridCellTemplate, как показано в моем примере. - person Philipp; 16.04.2021
comment
@Филипп Спасибо за совет. Пожалуйста, взгляните на stackoverflow.com/questions/67157360/ - person hirani89; 19.04.2021