CODEWITHSUNDEEP
angularkendo-grid
A_J
A_J

Reputation: 1013

Giving width and ng template for specific columns using ngFor kendo grid angular 2?

Generally when I use a separate kendo-grid-column tag for each column I can easily give [width] and ng template for any specific column How can I give width and ng template for specific columns using ngFor kendo grid angular 2 ? Taking an example from kendo docs at https://www.telerik.com/kendo-angular-ui/components/grid/columns/

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

In the above way of generating columns, I wish to use ng template and width to some specific column. If I write it inside kendo-grid-column tag, it will be applicable for all the columns but I want it only for specific columns. How can I do that ?

Upvotes: 0

Views: 2770

Answers (1)

topalkata
topalkata

Reputation: 2098

You can also use the same approach as for the other properties - just provide width properties in the respective objects from the columns array:

<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

Upvotes: 2

Related Questions