如何在kendo-grid加载时显示kendo加载图标？

Question

我正在使用Angular 5，并使用了非常棒的Kendo Grid组件。有一件事我还没开始做，那就是在检索数据时，在表体中显示一个加载指示器。现在，它只显示“没有可用的记录”。检索数据时，它会显示这些数据。更好的用户体验是像kendo Upload一样显示Kendo加载指示器。

我该怎么做呢？

谢谢

Answer 1

这里有一个例子，演示了如何通过自定义逻辑显示/隐藏加载指示器，基于如何检索网格数据的机制。

为了保持一致性，您可以使用Kendo UI styling作为加载指示器，但也可以根据您的喜好和要求使用任何其他加载掩码。

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

主要的关注点是将网格和掩码元素(要有条件地显示的元素- *ngIf="service.isLoading“class="k-i-loading")包装在一个共同的父元素中，并设置掩码元素的样式以覆盖父元素。

 <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;
      }
    `]

上面的示例依赖于数据服务在加载新数据时显示微调器，并在加载完成时隐藏它，但您可以根据需要使用任何其他逻辑来切换掩码元素的*ngIf结构指令绑定到的布尔值。