在Kendo for Angular网格中以编程方式生成模板 [英] Generating templates programmatically in Kendo for Angular grid
问题描述
在父组件中给出此columns数组:
Given this columns array in a parent component:
columns = [
{ field: 'field1', title: 'Title 1', width: '100px' },
{ field: 'field2', title: 'Title 2', width: '200px' },
{ field: 'field3', title: 'Title 3' }
];
我可以在my-table
组件中动态为Angular网格构建Kendo:
I can build a Kendo for Angular grid dynamically in a my-table
component:
@Component({
selector: 'my-table',
template: `
<kendo-grid #grid="kendoGrid" [data]="data">
<kendo-grid-column
*ngFor="let column of columns"
field="{{column.field}}"
title="{{column.title}}"
width="{{column.width}}"
</kendo-grid-column>
</kendo-grid>
`
})
export class MyTableComponent {
@Input() data: any[] = [];
@Input() columns: any[] = [];
}
我需要以编程方式将包含按钮的列添加到表中,该按钮应在父组件中执行功能.
What I need is to programmatically add to the table a column that contains a button, where the button should execute a function in the parent component.
这是应该由MyTableComponent
呈现的标记的示例:
This is an example of the markup that should be rendered by MyTableComponent
:
<kendo-grid-column>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<button kendoButton (click)="edit(dataItem,rowIndex)" [icon]="'edit'"></button>
</ng-template>
</kendo-grid-column>
MyTableComponent
应该从其父级接收columns
数组中的信息,如下所示:
MyTableComponent
should receive from its parent the information in the columns
array, something like this:
columns: [ { isButton: true, buttonLabel: 'Edit', callbackFunc: parentFunc } ];
可以在表组件中以编程方式生成模板吗?
Can a template be generated programmatically in the table component?
推荐答案
这种情况似乎是可能的.您应该在该列内添加一个单元格模板,并使用ngIf仅将其呈现给按钮列:
The scenario seems possible. You should add a cell template inside the column and use ngIf to render it only for button columns:
<ng-template *ngIf="column.isButton" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<button kendoButton (click)="column.callbackFunc(dataItem,rowIndex)" [icon]="column.icon">{{ column.buttonLabel }}</button>
</ng-template>
https://stackblitz.com/edit/angular -bzuy99?file = app/app.component.ts
这篇关于在Kendo for Angular网格中以编程方式生成模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!