How to set column width of autogenerated columns in Kendo UI Grid for angular

Question

Cannot set width for autogenerated Kendo UI Grid for angular. I want to set the width same as I am setting the field name and title and datatype.

I tried adding a property width to my ColumnSetting Array, then tried to just add a fixed width setting when generating the columns as shown in code below but it does not work

Expected result is that the Column Widths are set by the data provided in the ColumnSetting array. At present the width is not changing.

Answer 1

The solution is this:

    <kendo-grid
    [data]="gridView"
    [loading]="loading"
    [skip]="skip"
    [pageSize]="pageSize"
    [scrollable]="'virtual'"
    [rowHeight]="35"
    [height]="450"
    (pageChange)="pageChange($event)"
    [navigable]="true"
  >
  <kendo-grid-column  *ngFor="let column of columns" [width]="column.width"
  field="{{column.field}}"
  title="{{column.title}}"
  format="{{column.format}}"
  filter="{{column.type}}" ></kendo-grid-column> 
</kendo-grid>

    public columns: ColumnSetting[] = [
{
  field: 'Id',
  title: 'Id',
  type: 'text',
  width: "100px"
}, {
  field: 'firstName',

  title: 'FirstName',
  type: 'text',
  width: "20px"
}, {
  field: 'lastName',
  width: "40px",
  title: 'LastName',
  type: 'text'
}

];