Kendo angular detail grid layout issue

Question

It seems the kendo angular 2 detail grid layout breaks very easily while zooming in chrome. Does setting width of columns has anything to do with this?

Reproducible here plunker link

<kendo-grid
          [data]="view | async"
          [pageSize]="5"
          [skip]="skip"
          [pageable]="true"
          [scrollable]="'none'"
          (pageChange)="pageChange($event)"
        >
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductID" title="Product ID" width="220">
      </kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Product Name">
      </kendo-grid-column>
      <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}">
      </kendo-grid-column>
      </kendo-grid>

Either set the resolution to 1048 x 768. Or zoom in 'in chrome' Grid layout breaks (no horizontal scrollbars to navigate)

Answer 1

You need to set the width for the Product Name and the Unit Price columns and set the scrollable property to "scrollable" in the kendogrid.