Blazor Hierarchical Grid 行の選択

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

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

    Blazor 行選択の例

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

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

    設定

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

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

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

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

    None 選択

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

    単一選択

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

        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Single
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler for selection change
    }
}
razor

    複数選択

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

        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
razor

    注

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

    API の使用

    コードで行を選択

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

        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
    <IgbButton @onclick=Select>Select</IgbButton>
    @code {
        public IgbHierarchicalGrid grid;
        private async void Select()
        {
            object[] array = new object[] { 1,2, 5 };
            await this.grid.SelectRowsAsync(array, true);
        }
    }
razor

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

    行選択の解除

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

        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
    <IgbButton @onclick=Deselect>Deselect</IgbButton>
    @code {
        public IgbHierarchicalGrid grid;
        private async void Deselect()
        {
            object[] array = new object[] { 1, 2, 5 };
            await this.grid.DeselectRowsAsync(array);
        }
    }
razor

    行選択イベント

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

    • OldSelection - 行選択の前の状態を含む行 ID の配列。
    • NewSelection - 行選択の新しい状態に一致する行 ID の列。
    • Added - 現在選択に追加されている行 ID の配列。
    • Removed - 古い選択状態に従って現在削除されている行 ID の配列。
    • Event - 行選択の変更をトリガーする元のイベント。
    • Cancel - 行選択の変更を防ぐことができます。
    • Owner - イベントが子グリッドからトリガーされる場合、これにより、イベントの発行元であるコンポーネントへの参照が提供されます。
        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler
    }
}
razor

    すべての行の選択

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

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

    全行の選択解除

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

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

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

        <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbHierarchicalGrid>
    <IgbButton @onclick=GetSelected>Get selected</IgbButton>
    @code {
        public IgbHierarchicalGrid grid;
        private async void GetSelected()
        {
            var selected = this.grid.SelectedRows;
        }
    }
razor

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

    <IgbHierarchicalGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             SelectedRows=selectedRows
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
</IgbHierarchicalGrid>

@code {
    public object[] selectedRows = new object[] { 1, 2, 5 };
}
razor

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

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

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

    行テンプレート

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

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

    igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    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>`;
    }
}, false);
razor

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

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

    rowContext.select() および rowContext.deselect() メソッドは、IgbHierarchicalGrid のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。

    ヘッダー テンプレート

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

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

    public RenderFragment<IgbHeadSelectorTemplateContext> Template = (context) =>
{
    return @<div> <img style="min-width:80px;" src="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"/></div>;
};
razor

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

    IgbHierarchicalGrid の各階層レベルには、独自の行とヘッダーのテンプレートを設定できます。

    headContext.selectAll() および headContext.deselectAll() メソッドは、IgbHierarchicalGrid のテンプレート コンテキストで公開されます。基本機能をオーバーライドするクリック ハンドラーを実装した場合、特に子グリッドで現在の行を簡単に切り替えることができます。

    行の番号付けデモ

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    条件付き選択のデモ

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    API リファレンス

    その他のリソース

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