首页 文章

使用ngFor kendo grid angular 2为特定列提供宽度和ng模板？

提问于
浏览 481 次
0

通常，当我为每个列使用单独的 kendo-grid-column 标记时，我可以轻松地为任何特定列提供 [width] 和ng模板如何使用ngFor kendo grid angular 2为特定列提供宽度和ng模板？以https://www.telerik.com/kendo-angular-ui/components/grid/columns/为例来自kendo docs

@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'
    }
  ];
}

在上面生成列的方法中，我希望将ng模板和宽度用于某些特定列 . 如果我在 kendo-grid-column 标签内写，它将适用于所有列，但我只想要特定的列 . 我怎样才能做到这一点 ？

angular kendo-grid

1 回答

  • 2

    您也可以使用与其他属性相同的方法 - 只需在 columns 数组的相应对象中提供宽度属性：

    <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

    回复于

相关问题