Web Components Tree Grid 行の選択

    Web Components Tree Grid の Ignite UI for Web Components 行選択機能を使用すると、ユーザーは 1 つまたは複数のデータ行を対話的に選択、ハイライト表示、または選択解除できます。IgcTreeGridComponent 内に使用可能な選択モードがいくつかあります。

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

    Web Components 行選択の例

    以下のサンプルは、IgcTreeGridComponent の 4 種類の行選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。スイッチ ボタンを使用して、行セレクター チェックボックスを非表示または表示します。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    設定

    IgcTreeGridComponentで項目の選択を設定するには、その rowSelection プロパティを設定する必要があります。このプロパティは、GridSelectionMode 列挙を受け取ります。

    GridSelectionMode は以下のモードを公開します。

    • None (なし)
    • Single (単一)
    • Multiple (複数)
    • MultipleCascade

    以下で、それぞれについて詳しく説明します。

    None 選択

    IgcTreeGridComponent では、デフォルトで行選択が無効になります。(rowSelection は None です。)したがって、IgcTreeGridComponentUI とのインタラクションを通じて行を選択または選択解除することはできませんが、選択/選択解除する唯一の方法は、提供された API メソッドを使用することです。

    単一選択

    単一行の選択は、rowSelection プロパティ を Single に設定することのみで簡単に設定できるようになりました。これにより、グリッド内の 1 行のみを選択できます。行のセルにフォーカスするときにセルをクリックするかスペース キーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、RowSelectionChanging イベントが生成されます。

    <igc-tree-grid id="grid" row-selection="Single" auto-generate="true"
        allow-filtering="true">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelection);
}
ts
    public handleRowSelection(args: IgcRowSelectionEventArgs) {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}
ts

    複数選択

    IgcTreeGridComponent で複数の項目を選択できるようにするには、rowSelection プロパティを Multiple に設定するだけです。これにより、各行および IgcTreeGridComponent ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用して複数行を選択できます。選択はスクロール、ページング、およびソートとフィルター、などのデータ操作で保持されます。行を選択するには、セルをクリックするか、セルにフォーカスがあるときにスペース キーを押します。1 つの行を選択し、Shift キーを押しながら別の行をクリックすると、行の範囲全体が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。Ctrl キーを押しながらクリックすると、行が切り替わり、前の選択が保持されます。

    <igc-tree-grid id="grid" primary-key="ProductID" row-selection="Multiple"
        allow-filtering="true" auto-generate="true">
</igc-tree-grid>
html

    カスケード選択

    IgcTreeGridComponent で複数の項目を選択できるようにするには、rowSelection プロパティを MultipleCascade に設定するだけです。これにより、各行および IgcTreeGridComponent ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、およびソートやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときにスペース キーを押すことによっても選択できます。1 つの行を選択し、Shift キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。Ctrl キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。

    <igc-tree-grid id="grid" primaryKey="ID" foreign-key="ParentID" auto-generate="true"
        row-selection="MultipleCascade" allow-filtering="true">
</igc-tree-grid>
html

    このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。

    注

    • 行を選択すると、RowSelectionChanging イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
    • 行選択が有効になっている場合、行セレクターが表示されますが、表示しない場合は、hideRowSelectors を true に設定できます。
    • 行選択モードのランタイムを切り替えると、優先行選択状態がクリアされます。
    Ignite UI for Web Components | CTA Banner

    API の使用

    コードで行を選択

    以下は、単一または複数の行を同時に選択できるコード例です (primaryKey を介して)。さらに、このメソッドの 2 番目のパラメーターは boolean プロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='select'>Select 1,2 and 5</button>
html
    constructor() {
    document.getElementById("select").addEventListener("click", this.onClickSelect);
}
public onClickSelect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.selectRows([1,2,5], true);
}
ts

    1、2、および 5 の ID を持つデータ エントリに対応する行を IgcTreeGridComponent の選択に追加します。

    行選択の解除

    プログラムで行を選択解除する必要がある場合は、deselectRows メソッドを使用できます。

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='deselect'>DeSelect</button>
html
    constructor() {
    document.getElementById("deselect").addEventListener("click", this.onClickDeselect);
}
public onClickDeselect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.deselectRows([1,2,5]);
}
ts

    行選択イベント

    行選択に何らかの変更があると、RowSelectionChanging イベントが発生します。RowSelectionChanging は次の引数を公開します。

    • OldSelection - 行選択の前の状態を含む行 ID の配列。
    • NewSelection - 行選択の新しい状態に一致する行 ID の列。
    • Added - 現在選択に追加されている行 ID の配列。
    • Removed - 古い選択状態に従って現在削除されている行 ID の配列。
    • Event - 行選択の変更をトリガーする元のイベント。
    • Cancel - 行選択の変更を防ぐことができます。
    <igc-tree-grid id="grid">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}

public handleRowSelectionChange(args) {
    args.detail.cancel = true; // this will cancel the row selection
}
ts

    すべての行の選択

    IgcTreeGridComponent が提供するもう 1 つの便利な API メソッドが selectAllRows です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、false パラメーターを指定してメソッドを呼び出すと、SelectAllRows(false) は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。

    注: selectAllRows は削除された行を選択しないことに注意してください。

    全行の選択解除

    IgcTreeGridComponent は、デフォルトですべてのデータ行の選択を解除する deselectAllRows メソッドを提供しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみを選択解除します。ただし、false パラメーターを指定してメソッドを呼び出すと、DeselectAllRows(false) は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータをクリアします。

    選択した行を取得する方法

    現在選択されている行を確認する必要がある場合は、selectedRows ゲッターを使用して行 ID を取得できます。

    public getSelectedRows() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    const currentSelection = grid.selectedRows; // return array of row IDs
}
typescript

    さらに、selectedRows に行 ID を割り当てると、グリッドの選択状態を変更できます。

    public mySelectedRows = [1, 2, 3]; // an array of row IDs
constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.selectedRows = this.mySelectedRows;
}
ts

    行セレクターのテンプレート

    IgcTreeGridComponent でヘッダーおよび行セレクターをテンプレート化し、さまざまなシナリオに役立つ機能を提供するコンテキストにアクセスすることもできます。

    デフォルトでは、IgcTreeGridComponent は、行セレクターの親コンテナまたは行自体のすべての行選択操作を処理し、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、RowSelectionChanging イベントを使用して実行する必要があります。基本機能をオーバーライドする Click ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。

    行テンプレート

    カスタム行セレクター テンプレートを作成するには、igc-tree-grid 内で rowSelectorTemplate プロパティを使用できます。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。

    selected プロパティは現在の行が選択されているかどうかを示し、index プロパティは行インデックスにアクセスするために使用できます。

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox checked></igc-checkbox>
            </div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox></igc-checkbox>
            </div>`;
    }
}
ts

    rowID プロパティを使用して、igc-tree-grid 行の参照を取得できます。行セレクター要素に click ハンドラーを実装する場合に便利です。

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    return html`
        <igc-checkbox
            @click="${(event: any) => {
            this.onSelectorClick(event, ctx.implicit.key);
            }}"
        ></igc-checkbox>
    `;
}
ts

    上の例では、IgcCheckboxComponent を使用しており、rowContext.selected をその checked プロパティにバインドしています。行番号のデモで実際にこれをご覧ください。

    ヘッダー テンプレート

    カスタム行ヘッダー セレクター テンプレートを作成するには、IgcTreeGridComponent 内で headSelectorTemplate プロパティを使用します。テンプレートから、ヘッダーの状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。

    SelectedCount プロパティは現在選択されている行数を示し、totalCount は IgcTreeGridComponent に合計の行数を示します。

    public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
};
ts

    SelectedCount および TotalCount プロパティを使用して、ヘッド セレクターをチェックするか、不確定にする（部分的に選択する）かを決定できます。

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.headSelectorTemplate = this.headSelectorTemplate;
}

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return html`<igc-checkbox checked></igc-checkbox>`;
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return html`<igc-checkbox indeterminate></igc-checkbox>`;
        }
        return html`<igc-checkbox></igc-checkbox>`;
}
ts

    行の番号付けデモ

    このデモでは、カスタム ヘッダーと行セレクターの使用方法を示します。後者は、index を使用して行番号と、selected にバインドされた IgcCheckboxComponent を表示します。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Excel スタイル行セレクターのデモ

    このデモは、カスタム テンプレートを使用して Excel ライクなヘッダーおよび行セレクターを示します。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    条件付き選択のデモ

    このデモでは、RowSelectionChanging イベントと、選択できない行のチェックボックスが無効になっているカスタム テンプレートを使用して、一部の行が選択されないようにします。

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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