IgbGrid – 条件付きで行選択を制御するには

IgbGrid で特定の条件を満たす行だけを選択可能にするには、RowSelectionChangingScript で選択結果を検証して条件を満たさない行を除外し、RowSelectorTemplateScript で選択不可の行のチェックボックスを disabled 表示にします。

IgbGrid の設定

IgbGrid で複数行選択を有効にし、選択変更時の処理と行選択チェックボックスの表示をカスタマイズするスクリプトを、それぞれ RowSelectionChangingScript と RowSelectorTemplateScript に登録します。

<IgbGrid Data="CustomersData"
         PrimaryKey="ID"
         RowSelection="GridSelectionMode.Multiple"
         RowSelectionChangingScript="WebGridRowSelectionConditional"
         RowSelectorTemplateScript="WebGridRowSelectorTemplate">
    <IgbColumn Field="ContactName" ...>
    </IgbColumn>
    ...
</IgbGrid>

RowSelectionChangingScript の使用

RowSelectionChangingScript に登録した関数は、行の選択状態が変化するたびに呼び出されます。イベント引数の newSelection を、IDに A を含む行だけに絞り込むことで、選択不可の行を選択結果から除外できます。

const isRowSelectable = (id) => id.indexOf("A") !== -1;

igRegisterScript("WebGridRowSelectionConditional", (event) => {
    const eventArgs = event.detail;

    eventArgs.newSelection = eventArgs.newSelection.filter(x => isRowSelectable(x["ID"]));
}, false);

RowSelectorTemplateScript の使用

RowSelectorTemplateScript に登録した関数は、行ごとの選択チェックボックスの表示内容を返します。ctx.implicit.rowID で選択可否を判定し、選択不可の行では igc-checkbox に disabled 属性を付けた HTML を返すことで、操作できない見た目にします。

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    const html = window.igTemplating.html;
    const isSelectable = isRowSelectable(ctx.implicit.rowID);

    if (!isSelectable) {
        return ctx.implicit.selected
            ? html`<div class="igx-grid__cbx-padding"><igc-checkbox checked disabled></igc-checkbox></div>`
            : html`<div class="igx-grid__cbx-padding"><igc-checkbox disabled></igc-checkbox></div>`;
    }

    return ctx.implicit.selected
        ? html`<div class="igx-grid__cbx-padding"><igc-checkbox checked></igc-checkbox></div>`
        : html`<div class="igx-grid__cbx-padding"><igc-checkbox></igc-checkbox></div>`;
}, false);

実行結果

ID列に A を含む行だけが、クリックやチェックボックス操作で選択できます。対象外の行はチェックボックスが disabled 表示になり選択できません。ヘッダーの全選択チェックボックスを操作した場合も、選択可能な行のみが選択されます。