Question

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

我该怎么做？

谢谢

Answer 1

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

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

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

主要兴趣点是包裹网格和面具元素（有条件地显示的那个 - * ngIf =＆＃34; service.isLoading＆＃34; class =＆＃34; ki-loading＆＃34;）in一个共同的父级，并设置掩码元素的样式以覆盖父级。

 <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元素的指令绑定到。

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

1 个答案: