Components List

Web Components Hierarchical Grid 仮想化とパフォーマンス

Ignite UI for Web Components の IgcHierarchicalGridComponent コントロールは水平および垂直方向にコンテンツを仮想化します。

Web Components Hierarchical Grid 仮想化とパフォーマンスの例

const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
    return fetch(buildUrl(dataState))
        .then((result) => result.json());
}

function buildUrl(dataState: any) {
    let qS = "";
    if (dataState) {
        if (dataState.rootLevel) {
            qS += `${dataState.key}`;
        } else {
            qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
        }
    }
    return `${URL}${qS}`;
}ts

import { IgcGridCreatedEventArgs, IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import { getData } from './RemoteService';
import 'igniteui-webcomponents-grids/grids/combined';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

export class Sample {
    constructor() {
        const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
        const ordersRowIsland = document.getElementById("ordersRowIsland");
        const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");

        ordersRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Customers");
        });

        orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
            this.gridCreated(event, "Orders");
        });

        hierarchicalGrid.isLoading = true;
        getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
            hierarchicalGrid.isLoading = false;
            hierarchicalGrid.data = data;
            hierarchicalGrid.markForCheck();
        });
    }

    public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: string) {
        const context = event.detail;
        const dataState = {
            key: context.owner.childDataKey,
            parentID: context.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };

        context.grid.isLoading = true;

        getData(dataState).then((data: any[]) => {
            context.grid.isLoading = false;
            context.grid.data = data;
            context.grid.markForCheck();
        });
    }
}

new Sample();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Sample | Ignite UI | Web Components | infragistics</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
  <link rel="stylesheet" href="/src/index.css" type="text/css" />

</head>

<body>
  <div id="root">
    <div class="container sample">
      <div class="container fill">

        <igc-hierarchical-grid id="hGrid" primary-key="customerId" height="600px">
          <igc-column field="customerId" hidden="true"></igc-column>
          <igc-column field="companyName" header="Company Name"></igc-column>
          <igc-column field="contactName" header="Contact Name"></igc-column>
          <igc-column field="contactTitle" header="Contact Title"></igc-column>
          <igc-column field="address.country" header="Country"></igc-column>
          <igc-column field="address.phone" header="Phone"></igc-column>
          
          <igc-row-island id="ordersRowIsland" child-data-key="Orders" primary-key="orderId">
            <igc-column field="orderId" hidden="true"></igc-column>
            <igc-column field="shipAddress.country" header="Ship Country"></igc-column>
            <igc-column field="shipAddress.city" header="Ship City"></igc-column>
            <igc-column field="shipAddress.street" header="Ship Address"></igc-column>
            <igc-column field="orderDate" header="Order Date" data-type="date"></igc-column>

            <igc-row-island id="orderDetailsRowIsland" child-data-key="Details" primary-key="productId">
              <igc-column field="productId" hidden="true"></igc-column>
              <igc-column field="quantity" header="Quantity"></igc-column>
              <igc-column field="unitPrice" header="Unit Price"></igc-column>
              <igc-column field="discount" header="Discount"></igc-column>
            </igc-row-island>
          </igc-row-island>
        </igc-hierarchical-grid>

      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

仮想化の有効化

IgcHierarchicalGridComponent は、ビューポートに表示されているデータのみを描画し、ユーザーがスクロール時に表示データを切り替えた際に、DOM 描画およびメモリ使用を最適化します。IgcHierarchicalGridComponent の width および height のデフォルト値は 100% です。コンテンツが利用可能なスペースにフィットせず、垂直方向または水平方向にスクロールバーが必要な場合に仮想化が有効になります。

ただし、IgcHierarchicalGridComponent の width または height を明示的に null 値に設定できます。つまり、関連するディメンションが項目の合計サイズに基づいて決定されます。スクロールバーが表示されず、すべての項目が相対するディメンション (width が null 値の場合は列で、height が null 値の場合は行) に描画されます。

データのサイズは以下によって決定されます。

垂直 (行) 仮想化の行の高さ。rowHeight オプションで決定されますがデフォルトは 50(px) です。
水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する IgcHierarchicalGridComponent の columnWidth オプションを設定できます。

ディメンションを設定せずにグリッドでデフォルト動作を適用する場合、ほとんどの場合は望ましいレイアウトになります。列幅は列カウント、幅が設定された列、および IgcHierarchicalGridComponent コンテナの計算幅に基づいて決定されます。グリッドは、割り当てる幅が 136px 未満になる以外はすべての列を利用可能なスペースに合わせようとします。その場合、割り当てられない幅を持つ列は 136px の最小幅に設定され、水平方向スクロールバーが表示されます。グリッドは水平方向に仮想化されます。

列幅をパーセンテージ (%) で明示的に設定する場合、ほとんどの場合に水平スクロールバーがない水平方向に仮想化されないグリッドを作成します。

仮想化の制限

Mac OS で「Show scrollbars only when scrolling」システムオプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、IgcHierarchicalGridComponent の行コンテナーで、overflow が hidden に設定されているためです。オプションを「Always」に変更するとスクロールが表示されます。

FAQ

仮想化がで Hierarchical Grid でディメンションを設定する必要があるのはなぜですか?

描画する前にコンテナーおよび項目のサイズの情報がない場合に IgcHierarchicalGridComponent でランダムな位置にスクロールすると、スクロールバーの幅や高さの設定、表示項目の決定で誤りが発生します。ディメンションの推測がスクロールバーの誤操作となり、ユーザーエクスペリエンスを低下させます。そのため、仮想化を有効にするには、関連ディメンションを設定する必要があります。

API リファレンス

その他のリソース

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