私はAngular5を使用していて、素晴らしいKendoGridコンポーネントを使用しています。私がうまくいかなかったことがあります。それは、データの取得中にテーブル本体に読み込みインジケーターを表示することです。現在、「利用可能なレコードはありません」と表示されています。データが取得されると、それらが表示されます。より良いユーザーエクスペリエンスは、剣道のアップロードと同じように剣道の読み込みインジケーターを表示することです。
どうすればよいですか？
ありがとうございました
これは、グリッドデータの取得方法の仕組みに基づいて、カスタムロジックを介して読み込みインジケーターを表示/非表示にする方法を示す例です。
一貫性を保つために、ロードインジケーターにKendo UIスタイルを使用できますが、好みや要件に応じて他のロードマスクを使用することもできます。
http://plnkr.co/edit/ouhC4423oiJn7pVsycRv?p=preview
主な関心事は、グリッドとマスク要素（条件付きで表示されるもの-* ngIf = "service.isLoading" class = "ki-loading"）を共通の親でラップし、マスク要素をスタイルして親をカバーすることです。 。
<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構造ディレクティブマスク要素はにバインドされています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加