2017-11-25 107 views
0

通常,当我为每列使用单独的kendo-grid-column标记时,我可以很容易地给出[width]和ng模板用于任何特定列如何使用ngFor kendo grid angular 2为特定列提供宽度和ng模板?以一个例子从剑术文档在https://www.telerik.com/kendo-angular-ui/components/grid/columns/使用ngFor kendo grid angular 2为特定列赋予宽度和ng模板?

@Component({ 
    selector: 'my-app', 
    template: ` 
     <kendo-grid 
     [kendoGridBinding]="gridData" 
     [filterable]="true" 
     scrollable="none" 
     > 
     <kendo-grid-column 
      *ngFor="let column of columns" 
      field="{{column.field}}" 
      title="{{column.title}}" 
      format="{{column.format}}" 
      filter="{{column.type}}" 
     ></kendo-grid-column> 
     </kendo-grid> 
    ` 
}) 
export class AppComponent { 
    public gridData: any[] = sampleProducts; 

    public columns: ColumnSetting[] = [ 
    { 
     field: 'ProductName', 
     title: 'Product Name', 
     type: 'text' 
    }, { 
     field: 'UnitPrice', 
     format: '{0:c}', 
     title: 'Unit Price', 
     type: 'numeric' 
    }, { 
     field: 'FirstOrderedOn', 
     format: '{0:d}', 
     title: 'First Ordered', 
     type: 'date' 
    } 
    ]; 
} 

在生成列的上述方式,我希望使用纳克模板和宽度以一些特定的列。如果我将它写入kendo-grid-column标记中,它将适用于所有列,但我只希望它用于特定列。我怎样才能做到这一点 ?

+0

你尝试用[宽度] =“column.field ==='column_name'?'desired_width':'default_witdth'” –

回答

1

您也可以使用同样的方法为其他属性 - 只要提供相应的对象宽度属性从阵列:

<kendo-grid-column 
      *ngFor="let column of columns" 
      field="{{column.field}}" 
      title="{{column.title}}" 
      format="{{column.format}}" 
      filter="{{column.type}}" 
      width="{{column.width}}" 
     ></kendo-grid-column> 

public columns: ColumnSetting[] = [ 
    { 
     field: 'ProductName', 
     title: 'Product Name', 
     type: 'text' 
    }, { 
     field: 'UnitPrice', 
     format: '{0:c}', 
     title: 'Unit Price', 
     type: 'numeric', 
     width: 300 
    }, { 
     field: 'FirstOrderedOn', 
     format: '{0:d}', 
     title: 'First Ordered', 
     type: 'date' 
    } 
    ]; 

UPDATED EXAMPLE

+0

我该如何给像headerClass这样的属性?我试过它不起作用 –

+0

headerClass =“{{column.customClass}}”(其中customClass是一个字符串)或[headerClass] =“column.customClass”似乎按预期工作: http:///plnkr.co/edit/gtHYPdy0gpBJuP3uI0fR?p=preview 如果将在组件级别上提供自定义样式,请不要忘记删除封装。 – topalkata

+0

我会试一试,并会让你知道 –