如何在kendo-grid加載時顯示kendo加載圖標？

Question

我正在使用Angular 5並使用真棒Kendo Grid組件。有一些我沒有得到的工作，那就是在檢索數據時在表體中顯示加載指示符。現在，它只是說「沒有可用的記錄」。當數據被檢索時，它顯示它們。更好的用戶體驗就是像Kendo Upload一樣顯示kendo加載指標。

我該怎麼做？

謝謝

Answer 1

下面是一個例子，說明如何顯示/隱藏經由定製邏輯裝載指示器的基礎上，如何被檢索網格數據的機制。

爲保持一致性，您可以使用​​作爲加載指示器，但您也可以根據自己的偏好和要求使用任何其他加載掩碼。

http://plnkr.co/edit/ouhC4423oiJn7pVsycRv?p=preview

的興趣主要點被包裹網格和掩模元件（將被顯示的一個有條件 - * ngIf =「service.isLoading」類=「き加載」）在一個共同的親本，並設計掩模元素以覆蓋父項。

<div class="grid-wrapper"> 
     <kendo-grid 
      [data]="view | async" 
      [pageSize]="state.take" 
      [skip]="state.skip" 
      [sort]="state.sort" 
      [sortable]="true" 
      [pageable]="true" 
      [scrollable]="'none'" 
      (dataStateChange)="dataStateChange($event)" 
     > 
     <kendo-grid-column field="CategoryID" width="100"></kendo-grid-column> 
     <kendo-grid-column field="CategoryName" width="200"></kendo-grid-column> 
     <kendo-grid-column field="Description" [sortable]="false"> 
     </kendo-grid-column> 
     </kendo-grid> 
     <div *ngIf="service.isLoading" class="k-i-loading"></div> 
     </div> 
    `, 
    styles: [` 
    .grid-wrapper { 
     position: relative; 
    } 
     .k-i-loading { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     font-size: 64px; 
     background-color: rgba(255,255,255,.3); 
     color: #ff6757; 
     } 
    `] 

上面的例子依賴於數據服務，以顯示新的數據加載時的微調，並隱藏它，當加載完成，但你可以使用任何其他邏輯，根據您的需求來切換布爾值mask元素的* ngIf結構指令是綁定的。