React Grid 行の選択

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

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

React 行選択の例

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

設定

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

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

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

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

None 選択

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

単一選択

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

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

<IgrGrid rowSelection="single" autoGenerate="true" allowFiltering="true" rowSelectionChanging={handleRowSelection}>
</IgrGrid>

複数選択

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

<IgrGrid primaryKey="ProductID" rowSelection="multiple"
        allowFiltering="true" autoGenerate="true">
</IgrGrid>

注

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

API の使用

コードで行を選択

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

function onClickSelect() {
    gridRef.current.selectRows([1,2,5], true);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
</IgrGrid>
<button onClick={onClickSelect}>Select 1,2 and 5</button>

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

行選択の解除

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

function onClickDeselect() {
    gridRef.current.deselectRows([1,2,5]);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
</IgrGrid>
<button onClick={onClickDeselect}>Deselect 1,2 and 5</button>

行選択イベント

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

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

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

<IgrGrid rowSelectionChanging={handleRowSelectionChange}>
</IgrGrid>

すべての行の選択

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

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

全行の選択解除

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

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

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

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

function getSelectedRows() {
    return gridRef.current.selectedRows;
}

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

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

const mySelectedRows = [1,2,3];

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" selectedRows={mySelectedRows}>
</IgrGrid>

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

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

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

行テンプレート

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

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

function rowSelectorTemplate(ctx: IgrRowSelectorTemplateContext) {
    if (ctx.dataContext.implicit.selected) {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.dataContext.implicit.index}</span>
                    <IgrCheckbox checked></IgrCheckbox>
                </div>
            </>
        );
    } else {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.dataContext.implicit.index}</span>
                    <IgrCheckbox checked></IgrCheckbox>
                </div>
            </>
        );
    }
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}>
</IgrGrid>

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

public rowSelectorTemplate(ctx: IgrRowSelectorTemplateContext) {
    return (
        <>
            <IgrCheckbox onClick={(event) => onSelectorClick(event, ctx.dataContext.implicit.key)}>
            </IgrCheckbox>
        </>
    );
}

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

ヘッダーテンプレート

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

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

function headSelectorTemplate(ctx: IgrHeadSelectorTemplateContext) {
    return (
        <>
            {ctx.dataContext.implicit.selectedCount} / {ctx.dataContext.implicit.totalCount}
        </>
    );
};

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

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

function headSelectorTemplate(ctx: IgcHeadSelectorTemplateContext) {
    const implicit: any = ctx.dataContext.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox checked></IgrCheckbox>
                </>
            );
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox indeterminate></IgrCheckbox>
                </>
            );
        }
        return (
            <>
                <IgrCheckbox ></IgrCheckbox>
            </>
        );
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" headSelectorTemplate={headSelectorTemplate}>
</IgrGrid>

行の番号付けデモ

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

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

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

条件付き選択のデモ

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

API リファレンス

その他のリソース

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