Kendo UI Angular - 隱藏在詳細信息中的列標題具有鎖定列的網格

Question

在詳細信息網格中使用主 - 細節網格和至少一個鎖定列，詳細信息網格列的標題消失（除了鎖定列的標題）。

它看起來像.k-grid-header> .k-grid-header-wrap元素的寬度計算不正確。

注意：如果所有列最初都適合網格的寬度，則標題是可見的並且似乎按預期工作。

見本Plunker更多細節

@Component({ 
    providers: [CategoriesService], 
    selector: 'my-app', 
    template: ` 
     <kendo-grid 
      [data]="view | async" 
      [pageSize]="pageSize" 
      [skip]="skip" 
      [sortable]="true" 
      [sort]="sort" 
      [pageable]="true" 
      [height]="550" 
      (dataStateChange)="dataStateChange($event)" 
     > 
     <kendo-grid-column field="CategoryID" width="100"></kendo-grid-column> 
     <kendo-grid-column field="CategoryName" width="200" title="Category Name"></kendo-grid-column> 
     <kendo-grid-column field="Description" [sortable]="false"> 
     </kendo-grid-column> 
     <div *kendoGridDetailTemplate="let dataItem"> 
      <category-details [category]="dataItem"></category-details> 
     </div> 
     </kendo-grid> 
    ` 
}) 

@Component({ 
    selector: 'category-details', 
    providers: [ProductsService], 
    template: ` 
     <kendo-grid 
      [data]="view | async" 
      [pageSize]="5" 
      [skip]="skip" 
      [pageable]="true" 
      [scrollable]="'scrollable'" 
      (pageChange)="pageChange($event)" 
     > 
     <kendo-grid-column field="ProductID" title="Product ID" width="250" [locked]="true"> 
     </kendo-grid-column> 
     <kendo-grid-column field="ProductName" title="Product Name" width="250"> 
     </kendo-grid-column> 
     <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}" width="250"> 
     </kendo-grid-column> 
     </kendo-grid> 
    ` 
}) 

Screenshot here

Answer 1

這發生，因爲第k網格報頭纏繞元件在初始負荷0像素的寬度。這個寬度被Kendo使用Javascript設置爲內聯樣式。調整窗口大小，框架/分離器或網格似乎可以解決問題，並可能爲您提供一種方法來解決問題。如果您有權訪問網格的Kendo源代碼，您可以通過搜索k-grid-header-wrap來追蹤錯誤。

我懷疑這是一個劍道bug，應該記錄在劍道的GitHub問題跟蹤器中。