Web Components Hierarchical Grid 選択の概要

Web Components Hierarchical Grid の Ignite UI for Web Components 選択機能を使用すると、単純なマウス操作を使用してデータを簡単に操作および操作できます。使用可能な選択モードは 3 つあります。

行の選択
セルの選択
列の選択

rowSelection プロパティを使用すると、以下を指定できます。

None (なし)
Single (単一)
Multiple Select (複数選択)

Web Components Hierarchical Grid 選択の例

以下のサンプルは、IgcHierarchicalGridComponent の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditorHierarchicalGrid: IgcPropertyEditorPanelComponent
    private cellSelectionEditorHierarchicalGrid: IgcPropertyEditorPropertyDescriptionComponent
    private cellSelectionEditorRowIsland: IgcPropertyEditorPropertyDescriptionComponent
    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorHierarchicalGrid = this.propertyEditorHierarchicalGrid = document.getElementById('PropertyEditorHierarchicalGrid') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditorHierarchicalGrid = this.cellSelectionEditorHierarchicalGrid = document.getElementById('CellSelectionEditorHierarchicalGrid') as IgcPropertyEditorPropertyDescriptionComponent;
        var cellSelectionEditorRowIsland = this.cellSelectionEditorRowIsland = document.getElementById('CellSelectionEditorRowIsland') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;

        this._bind = () => {
            propertyEditorHierarchicalGrid.componentRenderer = this.renderer;
            propertyEditorHierarchicalGrid.target = this.hierarchicalGrid;
            cellSelectionEditorRowIsland.changed = this.webRowIslandCellSelectionChange;
            hierarchicalGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webRowIslandCellSelectionChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var rowIsland = this.rowIsland;
        if (rowIsland)
            rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
    }

}

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 ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditorHierarchicalGrid"
        id="PropertyEditorHierarchicalGrid"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            label="Hierarchical Grid Cell Selection"
            property-path="CellSelection"
            name="CellSelectionEditorHierarchicalGrid"
            id="CellSelectionEditorHierarchicalGrid"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            label="Row Island Cell Selection"
            property-path=""
            name="CellSelectionEditorRowIsland"
            id="CellSelectionEditorRowIsland"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple, MultipleCascade"
            drop-down-values="None, Single, Multiple, MultipleCascade">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string">
                </igc-column>
            </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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Web Components Hierarchical Grid 選択のオプション

Ignite UI for Web Components IgcHierarchicalGridComponent コンポーネントは、行選択、セル選択、列選択の 3 つの選択モードを提供します。デフォルトでは、IgcHierarchicalGridComponent で複数セル選択モードのみが有効になっています。選択モードの変更または有効化は、rowSelection、cellSelection または selectable プロパティを使用します。

Web Components Hierarchical Grid 行選択

プロパティ rowSelection を使用すると、次のオプションを指定できます。

None - IgcHierarchicalGridComponent の行選択が無効になります。
Single - IgcHierarchicalGridComponent 内の 1 行のみの選択が利用可能になります。
Multiple - 複数行の選択は、Ctrl + クリック、Space キー を押して行セレクターを使用することにより、複数行の選択が可能になります。

MultipleCascade - これはカスケード選択のモードであり、ユーザーがユーザーの操作で選択したレコードの下のツリー内のすべての子が選択されます。このモードでは、親の選択状態はその子の選択状態に完全に依存します。

詳細については、行選択トピックを参照してください。

Web Components Hierarchical Grid セル選択

以下のオプションは、プロパティ cellSelection で指定できます。

None - IgcHierarchicalGridComponent のセル選択が無効になります。
Single - IgcHierarchicalGridComponent 内の 1 セルのみの選択が利用可能になります。
Multiple - IgcHierarchicalGridComponent の選択のデフォルト状態です。複数セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。

詳細については、セル選択トピックを参照してください。

Web Components Hierarchical Grid 列選択

selectable プロパティを使用して、IgcColumnComponent ごとに以下のオプションを指定できます。このプロパティが true または false に設定されている場合、対応する列の選択がそれぞれ有効または無効になります。

以下の 3 つのバリエーションがあります。

Single selection (単一選択) - 列セルをマウスクリックします。
Multi column selection (複数列の選択) - Ctrl キーを押しながら列セルをマウスクリックします。
Range column selection (列の範囲選択) - Shift キーを押しながら + マウスクリック、その間のすべての列が選択されます。

詳細については、列選択トピックを参照してください。

既知の問題と制限

グリッドに primaryKey が設定されておらず、リモートデータシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモートサーバーへのリクエストがトリガーされる場合）、データ要求が完了すると、行は次の状態を失います:

行の選択
行の展開/縮小
行の編集
行のピン固定

API リファレンス

IgcHierarchicalGridComponent

その他のリソース

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