kendo-gridがロードされている間に剣道ローディングアイコンを表示する方法は？

Question

私はAngular 5で作業していて、素晴らしいKendo Gridコンポーネントを使用しています。私が仕事をしていない何かがあります。それは、データが取り出されている間にテーブル本体にローディングインジケータを表示することです。今、「利用可能なレコードがありません」と表示されます。データが取得されると、データが表示されます。より良いユーザエクスペリエンスは、剣道アップロードのように剣道ローディングインジケータを表示することです。

どうすればよいですか？

はここであなたに

Answer 1

ありがとうグリッドデータを取得する方法の力学に基づいて、カスタム・ロジックを経由して負荷インジケータを表示/非表示する方法を示す例です。

一貫性を保つために、ローディングインジケータとして​​を使用できますが、好みや要件に応じて他のローディングマスクを使用することもできます。関心の

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

主なポイントは、グリッド及びマスク要素ラップれる（表示されるいずれかを条件付き - * ngIf =「service.isLoading」クラス=「KI-ローディング」）共通の親で、親を覆うようにマスク要素をスタイリングするステップとを含む。

<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構造指示文がバインドされます。