Cascading Combos (カスケード コンボ) を含む Blazor Grid

    Grid の編集機能では、カスケード コンボボックス コンポーネントを使用する機会が提供されます。前の IgbCombo で値を選択すると、ユーザーは次の Blazor Combobox コンポーネントでの選択に関連するデータのみを受け取ります。

    カスケード コンボを使用した Blazor Grid サンプルの概要

    以下のサンプルは、IgbGrid がネストされた Cascading IgbCombo コンポーネントとどのように動作するかを示しています。

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

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

    設定

    列の編集を有効にするには、editable プロパティが true に設定されていることを確認してください。

    列の編集が有効になったら、IgbCombo を追加することから始めることができます。ここで、単一選択を 1 つだけ使用できるようにするには、singleSelect プロパティを設定する必要があることに注意してください。

    IgbCombo を使い始めるには、まずコンボをインポートする必要があります。

    builder.Services.AddIgniteUIBlazor(
        typeof(IgbGridModule),
        typeof(IgbComboModule)
    );
    razor

    次に、コンボを使用して列テンプレートを定義する必要があります。

    <IgbColumn Field="Country" Header="Country" BodyTemplate="WebGridCountryDropDownTemplate"></IgbColumn>
    
    @code{
        public static RenderFragment<IgbCellTemplateContext> WebGridCountryDropDownTemplate = (context) =>
        {
            var id = "country_" + context.Cell.Id.RowID;
            return @<IgbCombo id="@id" Placeholder="Choose Country..." SingleSelect=true ValueKey="Country" DisplayKey="Country" ChangeScript="CountryChange"></IgbCombo>;
        };
    }
    
    razor
    • displayKey - オブジェクト配列に必要 - 項目のテキストに使用されるプロパティを指定します。displayKey に値が指定されていない場合、コンボは指定された valueKey (存在する場合) を使用します。

    選択の変更を処理するには、change イベントが必要です。発行されたイベント引数には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。

    //In Javascript
    igRegisterScript("CountryChange", (ctx) => {
        const value = e.detail.newValue;
        cell.update(value);
        const nextCombo = document.getElementById("region_" + cell.id.rowID);
        const nextProgress = document.getElementById("progress_region_" + cell.id.rowID);
        if (value === "") {
            nextCombo.deselect(nextCombo.value);
            nextCombo.disabled = true;
            nextCombo.data = [];
        } else {
            nextProgress.style.display = "block";
            setTimeout(() => {
                nextProgress.style.display = "none";
                nextCombo.disabled = false;
                nextCombo.data = this.regions.filter(x => x.Country === value);
            }, 2000);
        }
    });
    razor

    最後に、データのリストを読み込むときに必要な IgbLinearProgress を追加します。

        public static RenderFragment<IgbCellTemplateContext> WebGridRegionDropDownTemplate = (context) =>
        {
            var id = "region_" + context.Cell.Id.RowID;
            return @<div style="display:flex;flex-direction:column;"><IgbCombo id="@id" Placeholder="Choose Region..." SingleSelect=true ValueKey="Region" DisplayKey="Region" ChangeScript="RegionChange"></IgbCombo><IgbLinearProgress Indeterminate=true></IgbLinearProgress></div>;
        };
    razor

    既知の問題と制限

    制限 説明
    コンボ ドロップダウン リストは他の UI 要素の後ろに隠れる場合があります。 グリッド内の要素の積み重ね順序により、コンボ ドロップダウンがヘッダーやフッターなどの他の要素の後ろに隠れる場合があります。

    Blazor Grid API メンバー