Blazor Grid の縮小可能な列グループの概要

Blazor Grid の Ignite UI for Blazor の縮小可能な列グループ機能を使用すると、IgbGrid 内の複数レベルのネストされた列と列グループをグループ化し、これらのグループを縮小したり展開したりしてデータの視覚化とナビゲーションを向上させるオプションを提供することで、それらを整理および管理できます。

Blazor Grid の縮小可能な列グループの例

Ask why bazork grid url a re lik this - https://staging.infragistics.com/blazor-apis-new/blazor/IgniteUI.Blazor/25.1.x/classes/IgbGrid#UpdateCell(Object,%20Object,%20String)

設定

IgbGrid および縮小可能な複数列ヘッダーを使用するには、まず以下のコマンドを入力して、Ignite UI for Blazor をインストールする必要があります。

> dotnet add package IgniteUI.Blazor --version 26.1.98

Ignite UI for Blazor については、はじめに トピックををご覧ください。

そのため、複数列ヘッダーのトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。

使用方法

縮小可能な列グループは複数列ヘッダー機能の一部で、列グループをより小さいデータ セットに縮小/展開する方法を提供します。列グループが折りたたまれると、列のサブセットがエンドユーザーに表示され、グループの他の子列が非表示になります。縮小/展開された各列は、グリッド データソースにバインドすることも、非バインドにして計算することもできます。

列グループを縮小可能なに定義するには、IgbColumnGroup.Collapsible の Collapsible プロパティを true に設定する必要があります。

VisibleWhenCollapsed プロパティを少なくとも 2 つの子列に定義する必要があることに注意してください。グループが縮小されたときに少なくとも 1 列が表示され (VisibleWhenCollapsed の設定が true)、グループが展開されたときは少なくとも 1 列が非表示になります (VisibleWhenCollapsed の設定が false)。**それ以外は、縮小機能は無効になります。**子列の一部に VisibleWhenCollapsed が指定されていない場合、この列は、親の状態が展開または縮小されているかに関係なく常に表示されます。

それでは、以下のマークアップを見てみましょう。

 <IgbColumnGroup Header="Customer Information" Collapsible="true">
    <!--The column below will be visible when its parent is collapsed-->
    <IgbColumn Field="CustomerName" Header="Full name" VisibleWhenCollapsed="true"></IgbColumn>
        <!--The three columns below will be visible when its parent is expanded-->
        <IgbColumn Field="CustomerID" Header="Customer ID" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumn Field="FirstName" Header="First Name" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumn Field="LastName" Header="Last Name" VisibleWhenCollapsed="false"></IgbColumn>
        <IgbColumnGroup Header="Customer Address">
            <IgbColumn Field="Country" Header="Country" Sortable="true"></IgbColumn>
            <IgbColumn Field="City" Header="City" Sortable="true"></IgbColumn>
        </IgbColumnGroup>
 </IgbColumnGroup>

すべての子列に 3 つの状態があります。

• 親の展開状態に関係なく、常に表示できます。
• 親が縮小されているときに表示できます。
• 親が縮小されているときに非表示にできます。

縮小可能として指定された列グループの初期状態は Expanded が true に設定されていますが、false に設定することでこの動作を簡単に変更できます。

展開/縮小インジケーター テンプレート

IgbGrid のデフォルトの展開インジケーターは次のとおりです。

IgbGrid のデフォルトの縮小インジケーターは次のとおりです。

また、デフォルトの展開/縮小インジケーターを変更する必要がある場合は、これを実現するためのテンプレート オプションを提供します。

 <IgbColumnGroup @ref="infoColumn" Header="Customer Information" Collapsible="true">
    <IgbColumn Field="CustomerName" Header="Full name" VisibleWhenCollapsed="true"></IgbColumn>
    <IgbColumn Field="CustomerID" Header="Customer ID" VisibleWhenCollapsed="false"></IgbColumn>
    <IgbColumn Field="FirstName" Header="First Name" VisibleWhenCollapsed="false"></IgbColumn>
    <IgbColumn Field="LastName" Header="Last Name" VisibleWhenCollapsed="false"></IgbColumn>
    <IgbColumnGroup @ref="addressColumn" Header="Customer Address">
        <IgbColumn Field="Country" Header="Country" Sortable="true"></IgbColumn>
        <IgbColumn Field="City" Header="City" Sortable="true"></IgbColumn>
    </IgbColumnGroup>
 </IgbColumnGroup>

@code {
    private IgbColumnGroup infoColumn;
    private IgbColumnGroup addressColumn;

    public RenderFragment<IgbColumnTemplateContext> ColumnIndicatorTemplate = (context) =>
    {
        string icon = context.Column.Expanded ? "remove" : "add";
        return @<IgbIcon IconName="@icon" Collection="material"></IgbIcon>;
    };

    protected override void OnAfterRender(bool firstRender)
    {
        this.infoColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate;
        this.addressColumn.CollapsibleIndicatorTemplate = this.ColumnIndicatorTemplate;
    }
}

注 最初にグループを縮小するオプションは、非表示の列よりも優先されることに注意してください。 hidden プロパティを使用して列を非表示にすることを宣言し、同じ列を表示するグループが定義されている場合、列が表示されます。

API リファレンス

その他のリソース

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

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

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