Kendo Grid Angular 2 - Corriger les colonnes du groupe (intermittent)

Question

Utilisé: Kendo Grid Angularjs 2 version pour afficher la liste des utilisateurs. Problème: Problème de rendu intermittent pour afficher les données des colonnes locked car il affiche uniquement la première ligne verrouillée.

S'il vous plaît voir la capture d'écran ci-dessous en question a mis en évidence:

HTML Code modèle:

<kendo-grid 
     [scrollable]="'scrollable'" 
     [data]="usersList | async" 
     [pageSize]="pageSize" 
     [skip]="skip" 
     [sort]="sort" 
     [filter]="filter" 
     [sortable]="{ 
      allowUnsort: true, 
      mode: multiple 
      }" 
     [pageable]="true" 
     [filterable]="true" 
     (dataStateChange)="dataStateChange($event)" 
> 
    <kendo-grid-column field="first_name" title="First Name" width="200" [locked]="true"> 
     <ng-template kendoGridCellTemplate let-dataItem> 
      <button [routerLink]="['/users/edit/' + dataItem.id]" title="Edit" type="button" class="btn btn-outline btn-default"><i class="fa fa-edit"></i></button> 
      {{dataItem.first_name}} 
     </ng-template> 
    </kendo-grid-column> 

    <kendo-grid-column field="last_name" title="Last Name" width="125" [locked]="true"> 
     <ng-template kendoGridCellTemplate let-dataItem>{{dataItem.last_name}}</ng-template> 
    </kendo-grid-column> 

    <kendo-grid-column-group media="(min-width: 450px)" [locked]="false"> 

     <kendo-grid-column field="username" title="Username" width="200"></kendo-grid-column> 
     <kendo-grid-column field="email" title="Email" width="350"></kendo-grid-column> 
     <kendo-grid-column field="created_at" title="Created On" width="150" [headerStyle]="{'text-align': 'center'}" class="text-centre" [format]="'{0:dd/MM/y}'"> 
      <ng-template kendoGridFilterCellTemplate let-filter let-column="column"> 
       <kendo-grid-date-filter-cell [showOperators]="true" [column]="column" [filter]="filter"></kendo-grid-date-filter-cell> 
      </ng-template> 
      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.created_at | date:'dd/MM/y' }}</ng-template> 
     </kendo-grid-column> 

    </kendo-grid-column-group> 
</kendo-grid> 

Answer 1

Apparemment, j'ai résolu le problème en ajoutant la classe ci-dessous sur css.

.k-grid-content-locked { 
    height: calc(100% + 0px) !important; 
}