Blazor Hierarchical Grid の列非表示

Ignite UI for Blazor には組み込み列非表示 UI があり、これを Blazor Hierarchical Grid のツールバーから使用して列の表示状態を変更できます。開発者は、必要に応じてページ内の任意の場所に列非表示 UI を柔軟に定義できます。Blazor Hierarchical Grid 列の非表示機能は、グリッドのサイズを小さくし、冗長なフィールドをタブで移動する必要をなくしたい場合に特に便利です。

Blazor Hierarchical Grid 列非表示の例

Hierarchical Grid のセットアップ

IgbHierarchicalGrid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String" Sortable="true"></IgbColumn>
    <IgbColumn Field="Photo" Header="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
</IgbHierarchicalGrid>

ツールバーの列非表示 UI

定義済みの列非表示 UI は、IgbHierarchicalGrid のツールバーの DropDown 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。

これには、IgbHierarchicalGrid 内に IgbGridToolbarActions と IgbGridToolbarHiding の両方を設定することだけです。

<IgbHierarchicalGrid Data="SingersData">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

IgbHierarchicalGrid にはツールバーの列非表示 UI に便利なプロパティがあります。

Title プロパティを使用して、ツールバーのドロップダウン ボタンに表示されるタイトルを設定します。

<IgbHierarchicalGrid Data=SingersData>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

このトピックのはじめにあるコードの結果は Blazor 列非表示の例のセクションで確認できます。

列の非表示の無効化

列の DisableHiding プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。

<IgbHierarchicalGrid>
    <IgbColumn Field="Artist" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="GrammyAwards" Sortable=true DisableHiding=true></IgbColumn>

    <IgbRowIsland>
        <IgbColumn Field="Album" Sortable=true DisableHiding=true></IgbColumn>
    </IgbRowIsland>
</IgbHierarchicalGrid>

スタイル設定

グリッドは、利用可能な CSS 変数の一部を設定することでさらにカスタマイズできます。 これを実現するために、最初にグリッドに割り当てるクラスを使用します。

<IgbHierarchicalGrid class="hierarchical-grid"></IgbHierarchicalGrid>

次に、関連するコンポーネントに関連する CSS 変数を設定します。スタイルも igx-column-actions にのみ適用するので、グリッドの残りの部分は影響を受けません。

.hierarchical-grid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

デモ

API リファレンス

その他のリソース

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

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