Web Components Grid 行の選択

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

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

Web Components 行選択の例

以下のサンプルは、IgcGrid の 3 種類の行選択動作を示しています。以下のドロップダウンを使用して、利用可能な各選択モードを有効にします。チェックボックスを使用して、行セレクター チェックボックスを非表示または表示します。

設定

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

GridSelectionMode exposes the following modes:

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

• MultipleCascade

None 選択

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

単一選択

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

<igc-grid id="grid" row-selection="Single" auto-generate="true"
        allow-filtering="true">
</igc-grid>

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelection);
}

public handleRowSelection(args: IgcRowSelectionEventArgs) {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}

複数選択

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

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

注

• 行選択およびセル選択を正しく実行するには、IgcGrid.rowSelectionChanging にリモート仮想化がある場合、PrimaryKey を設定します。
• IgcGrid.rowSelectionChanging でリモート仮想化を使用した場合、ヘッダーのチェックボックスをクリックすると、現在グリッドにあるすべてのレコードが選択/選択解除されます。新しいデータがオンデマンドで IgcGrid.rowSelectionChanging にロードされると、新、しく追加された行は選択されない制限があるため、これらの行を選択するには API メソッドを使用して動作を処理する必要があります。

API の使用

コードで行を選択

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

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

<button id='select'>Select 1,2 and 5</button>

constructor() {
    document.getElementById("select").addEventListener("click", this.onClickSelect);
}
public onClickSelect() {
    const grid = document.getElementById("grid") as IgcGridComponent;
    grid.selectRows([1,2,5], true);
}

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

行選択の解除

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

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

<button id='deselect'>DeSelect</button>

constructor() {
    document.getElementById("deselect").addEventListener("click", this.onClickDeselect);
}
public onClickDeselect() {
    const grid = document.getElementById("grid") as IgcGridComponent;
    grid.deselectRows([1,2,5]);
}

行選択イベント

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

• OldSelection - 行選択の前の状態を含む行 ID の配列。
• NewSelection - 行選択の新しい状態に一致する行 ID の列。
• Added - 現在選択に追加されている行 ID の配列。
• Removed - 古い選択状態に従って現在削除されている行 ID の配列。
• Event - 行選択の変更をトリガーする元のイベント。
• Cancel - 行選択の変更を防ぐことができます。

<igc-grid id="grid">
</igc-grid>

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}

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

すべての行の選択

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

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

全行の選択解除

IgcGrid provides a DeselectAllRows method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. If you call the method with false parameter, DeselectAllRows(false) will always clear all row selection state even if filtering is applied.

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

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

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

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

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

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

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

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

行テンプレート

カスタム行セレクター テンプレートを作成するには、igc-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>`;
    }
}

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

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

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

ヘッダー テンプレート

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

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

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

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

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

constructor() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    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>`;
}

行の番号付けデモ

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

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

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

条件付き選択のデモ

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

API リファレンス

その他のリソース

• 選択
• セル選択
• ページング
• フィルタリング
• ソート
• 集計
• 列の移動
• 列のピン固定
• 列のサイズ変更
• 仮想化とパフォーマンス

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)