kendo-angular2 中的自定义列

Question

我正在开发一个 Kendo-angular2 网格，我计划在其中包含自定义列。网格结构如下。但对于某些专栏，我想要自定义样式。

<kendo-grid [kendoGridBinding]="gridData" [pageSize]="10" [pageable]="true" [sortable]="true" [groupable]="true" [height]="370">

    <template ngFor [ngForOf]="columns" let-column>

        <kendo-grid-column field="{{column}}"></kendo-grid-column>
    </template>

</kendo-grid>

Answer 1

您可以使用 kendoGridCellTemplate 实现它

   <kendo-grid [kendoGridBinding]="gridData">
            <kendo-grid-column *ngFor="let column of columns" [field]="column">
                <template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
                <span [class.special]="column.field === 'CompanyName'">  {{column.field}}({{columnIndex}})</span>
                </template>
                   <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                  <span [class.special]="column === 'CompanyName'">  {{dataItem[column]}}</span>
                </template>
            </kendo-grid-column>
        </kendo-grid>

更多信息： http://www.telerik.com/kendo-angular-ui/components/grid/columns/#toc-templates http://www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/

笨蛋：http://plnkr.co/edit/e2WX53zdOL9ioshWMIZO?p=preview

kendo-angular2 中的自定义列

Custom columns in kendo-angular2

kendo-ui-angular2

angular