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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在加载kendo-grid时显示kendo加载图标?相关的知识,希望对你有一定的参考价值。

我正在使用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元素必然会被绑定。

以上是关于如何在加载kendo-grid时显示kendo加载图标?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 url 加载时显示图像

如何在 .DAE 环境和角色加载时显示加载屏幕?

如何在页面加载时显示 ajax 加载 gif 动画?

如何在加载延迟加载的路由组件时显示“加载”动画?

如何停止 ValidationMessageFor 在加载时显示错误消息?

Android:如何在将数据加载到 WebView 时显示进度条?