如何在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结构指令是绑定的。