"如何在劍道網格加載時顯示劍道加載圖標？"

Question

我正在使用 Angular 5 並使用很棒的 Kendo Grid 組件。 有些事情我還沒有開始工作，那就是在檢索數據時在表體中顯示加載指示器。 現在，它只是說“沒有可用的記錄”。 檢索數據時，它會顯示它們。 更好的用戶體驗是像 Kendo Upload 一樣顯示 kendo 加載指示器。

我該怎么做呢？

謝謝

Answer 1

這是一個示例，基於如何檢索Grid數據的機制，說明了如何通過自定義邏輯顯示/隱藏加載指示器。

為了保持一致性，可以將Kendo UI樣式用於加載指示符，但也可以根據自己的偏好和要求使用任何其他加載掩碼。

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元素綁定到。

Answer 2

您現在可以簡單地使用劍道網格組件的加載屬性

<kendo-grid [loading]="variable">
</kendo-grid>