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

Posted 2021-05-03

我正在使用Angular 5并使用了令人敬畏的Kendo Grid组件。有些东西我没有工作，那就是在检索数据时在表体中显示一个加载指示器。现在，它只是说“没有可用的记录”。检索数据时，会显示它们。更好的用户体验就是像Kendo上传一样显示kendo加载指示器。

我该怎么做呢？

谢谢

答案

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

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

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

主要的兴趣点是将Grid和mask元素（有条件地显示的那个 - * ngIf =“service.isLoading”class =“ki-loading”）包装在一个公共父级中，并将mask元素设置为覆盖父级。

 <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结构指令mask元素必然会被绑定。