Grille de Kendo avec des colonnes verrouillées se divise en ligne suivante

Question

J'ai une grille de kendo avec beaucoup de colonnes. La largeur de la grille est de 100% Les premières colonnes sont également verrouillées. Après mon appel ajax où j'obtiens/définissez les données de la grille, le côté droit de la grille s'affiche sous le côté gauche de la grille. Cela a quelque chose à voir avec la façon dont le calcul de dimensionnement interne est effectué. Si la largeur de la grille est donnée, le problème n'apparaît pas. Ceci n'est toutefois pas satisfaisant car la grille ne s'affiche pas de la même manière dans les différents navigateurs et ne se redimensionne pas comme lorsque la largeur est de 100%.

Est-ce que quelqu'un d'autre a vu ceci ou sait comment l'empêcher?

S'il vous plaît voir l'image ci-dessous

Answer 1

Toutes les largeurs de colonne de la grille doivent être explicitement spécifiée en pixels pour la fonctionnalité de colonne verrouillée pour fonctionner comme prévu:

LINK TO DOCS

Une fois que cette exigence est satisfaite , vous pouvez définir la largeur de la grille à 100% et la grille sera toujours affichée comme prévu:

<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