Web Components Hierarchical Grid のリモート データ操作

    デフォルトで、IgcHierarchicalGridComponent は独自のロジックを使用してデータ操作を実行します。

    これらのタスクをリモートで実行し、IgcHierarchicalGridComponent で公開される特定の入力とイベントを使用して IgcHierarchicalGridComponent に結果のデータを供給できます。

    リモート ページング

    export class RemotePagingService {
        public static BASE_URL = 'https://data-northwind.indigo.design/';
        public static CUSTOMERS_URL = `${RemotePagingService.BASE_URL}Customers/GetCustomersWithPage`;
      
        constructor() {}
    
        public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
            return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
            .then((result) => result.json())
            .catch((error) => console.error(error.message));
        }
        
        public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
            return fetch(`${RemotePagingService.BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
            .then((result) => result.json());
        }
    
        private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
            let qS = "";
            if (baseUrl) {
                    qS += `${baseUrl}`;
            }
    
            // Add pageIndex and size to the query string if they are defined
            if (pageIndex !== undefined) {
                qS += `?pageIndex=${pageIndex}`;
                if (pageSize !== undefined) {
                    qS += `&size=${pageSize}`;
                }
            } else if (pageSize !== undefined) {
                qS += `?perPage=${pageSize}`;
            }
    
            return `${qS}`;
        }
    }
    ts

    サービスを宣言した後にコンポーネントを作成する必要があり、IgcHierarchicalGridComponent コンストラクションとデータ サブスクリプションを処理します。

    まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。

        constructor() {
            this.hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
            this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
            const ordersRowIsland = document.getElementById("ordersRowIsland") as IgcRowIslandComponent;
            const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland") as IgcRowIslandComponent;
    
            ordersRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
            orderDetailsRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
    
            this._bind = () => {
                window.addEventListener("load", () => {
                    this.pager.perPage = this._perPage;
                    this.loadCustomersData(this.page,this.perPage);
                });
    
                this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
                  this.perPage = args.detail;
                  this.loadCustomersData(this.page, this.perPage);
                }) as EventListener);
    
                this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
                  this.page = args.detail;
                  this.loadCustomersData(this.page, this.perPage);
                }) as EventListener);
    
                ordersRowIsland.addEventListener("gridCreated", (event: any) => {
                    this.gridCreated(event, "Customers");
                });
        
                orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
                    this.gridCreated(event, "Orders");
                });
            }
        
            this._bind();
        }
    ts

    また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。

      private updateUI(): void {
            if (this.hierarchicalGrid && this.data) { // Check if grid and data are available
                this.hierarchicalGrid.data = this.data;
            }
        }
    
        private loadCustomersData(pageIndex?: number, pageSize?: number): void {
            this.hierarchicalGrid.isLoading = true;
            
            RemotePagingService.getDataWithPaging(pageIndex,pageSize)
            .then((response: CustomersWithPageResponseModel) => {
              this.totalRecordsCount = response.totalRecordsCount;
              this.pager.perPage = pageSize;
              this.pager.totalRecords = this.totalRecordsCount;
              this.page = response.pageNumber;
              this.data = response.items;
              this.hierarchicalGrid.isLoading = false;
              this.updateUI(); // Update the UI after receiving data
            })
            .catch((error) => {
              console.error(error.message);
              this.hierarchicalGrid.data = [];
              this.hierarchicalGrid.isLoading = false;
              this.updateUI();
            })
          }
    ts

    最後に、階層グリッドの実際の階層レベルの背後にある動作を処理する必要があります。

        public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, parentKey: string) {
            const context = event.detail;
            const parentId: string = context.parentID;
            const childDataKey: string = context.owner.childDataKey;
    
            context.grid.isLoading = true;
            RemotePagingService.getHierarchyDataById(parentKey, parentId, childDataKey)
            .then((data: any) => {
              context.grid.data = data;
              context.grid.isLoading = false;
              context.grid.markForCheck();
            })
            .catch((error) => {
              console.error(error.message);
              context.grid.data = [];
              context.grid.isLoading = false;
              context.grid.markForCheck();
            });
        }
    
        public webHierarchicalGridPaginatorTemplate = () => {
           return html `
            <igc-paginator 
                id="islandPaginator">
            </igc-paginator>`
        }
    ts

    詳細については、以下のデモをご覧ください。

    グリッド リモート ページングのデモ

    EXAMPLE

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    既知の問題と制限

    • グリッドに primaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
    • 行の選択
    • 行の展開/縮小
    • 行の編集
    • 行のピン固定
    Ignite UI for Web Components | CTA Banner

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。