ロックされた列を持つ剣道グリッドは次の行に分割されます

Question

私は多くの列を持つ剣道グリッドを持っています。グリッド幅は100％です。最初の列もロックされています。グリッドデータを取得/設定する私のAjaxコールの後、グリッドの右側がグリッドの左側の下に表示されます。それは、内部のサイジング計算がどのように行われるかと関係があります。グリッドに特定の幅が与えられている場合、問題は表示されません。ただし、グリッドが異なるブラウザで同じ方法を表示しないため、幅が100％の場合と同じようにグリッドのサイズが変更されないため、これは不満です。

これを見た他の人はいませんか、それを防ぐ方法はありますか？

参照してください下の画像

Answer 1

すべてのグリッド列の幅が期待通りに動作するように明示的にロックされた列の機能のためにピクセル単位で指定する必要があります

LINK TO DOCS

この要件が満たされたら、グリッドの幅を100％に設定すると、グリッドは引き続き表示されます。

<kendo-grid [data]="gridData" [height]="370" style="width: 100%"> 
     <kendo-grid-column field="ProductID" title="ID" width="50" [locked]="true"> 
     </kendo-grid-column> 
     <kendo-grid-column field="ProductName" title="Name" width="250" [locked]="true"> 
     </kendo-grid-column> 
     <kendo-grid-column field="Category.CategoryName" title="Category" width="200"> 
     </kendo-grid-column> 
     <kendo-grid-column field="UnitPrice" title="Price" width="280"> 
     </kendo-grid-column> 
     <kendo-grid-column field="UnitsInStock" title="In stock" width="280"> 
     </kendo-grid-column> 
     <kendo-grid-column field="Discontinued" title="Discontinued" width="220"> 
      <ng-template kendoGridCellTemplate let-dataItem> 
       <input type="checkbox" [checked]="dataItem.Discontinued" disabled/> 
      </ng-template> 
     </kendo-grid-column> 
    </kendo-grid> 

http://plnkr.co/edit/3kmOf54DT7JUG68qUdaP?p=preview