Kendo Grid Column width is not applied

[Aleksandr]

I have two pages one page has kendo grid in it and grid column width is applied without an issue.

This code works:

<div class="row">
  <div class="col-lg-12 pv-lg col align-self-center">
    <kendo-grid [kendoGridBinding]="gridData" [pageSize]="pageSize" [pageable]="gridData.length > 9 && pageSize > 0"
          [sortable]="false"
          [filterable]="false"
          [groupable]="false">
       <ng-template kendoGridToolbarTemplate>
         <button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
       </ng-template>
     <kendo-grid-column
          *ngFor="let column of columnNames; let i = index;" field="{{column}}" [width]="calculateColumnLength(i)"></kendo-grid-column>
     <kendo-grid-excel fileName="{{ cardTitle }}.xlsx" [fetchData]="allData"></kendo-grid-excel>
   </kendo-grid>
  </div>
</div>

However when I build tab strips with grid in it. The grid column width is not applied. 

This code doesn't work:

<kendo-tabstrip (tabSelect)="handleTabSelected($event)">
  <kendo-tabstrip-tab *ngFor="let tab of tabsInfo; let i = index" [title]="tab.tabName" [selected]="i == 0">
    <ng-template kendoTabContent>
      <kendo-grid [kendoGridBinding]="tab.gridData">
         <ng-template kendoGridToolbarTemplate>
           <button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
         </ng-template>
         <kendo-grid-column *ngFor="let column of tab.columnNames; let j = index;" field="{{column}}" width="230"></kendo-grid-column>
         <kendo-grid-excel fileName="{{tab.tabName}}.xlsx" [fetchData]="allData"></kendo-grid-excel>
      </kendo-grid>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

 

I been on this issue for the past two days, could some one please point out what am I doing wrong.

 

Regards,

 

Alex

[Dimiter Topalov]

Hello Aleksandr,

When the Grid is scrollable (the default state), and all columns have their widths set, it behaves like a regular HTML Table with fixed layout, i.e.:

-- When the available Grid width (typically the container's width, when no width is set explicitly via the Grid element styles) is greater than the sum of all column widths, the remaining space is distributed evenly between all columns.

-- When the sum of the column widths is greater than the Grid width, a horizontal scrollbar appears and all columns have the widths, set via the width property:

1) Remaining space is distributed between the Grid columns:

https://plnkr.co/edit/6Af0U6KKcNextm9kQFGW?p=preview

2) Horizontal scrollbar and all columns' widths are as set via the property:

https://plnkr.co/edit/VA1QKKFoZ2nUZIpqfpUq?p=preview

Rendering the Grid within a TabStrip tab should not affect the described behavior, but if you are observing something different, please describe the unexpected behavior in further details and send us a similar isolated runnable example or modify the provided Plunker to better reflect your scenario, and send it to us so we can investigate the issue further and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[adrian]

maybe your answer should be added to the width documentation?

[Dimiter Topalov]

Hi Adrian,

Indeed, it is not added in the official documentation so far as this is the default behavior of the HTML tables, and not specifically caused by internal Grid-specific logic. However, it is a long-standing cause of confusion and the behavior seems a bit unexpected, so we will consider adding a detailed explanation of the default and expected behavior.

Regards,
Dimiter Topalov
Progress Telerik