Blazor Grid の列非表示

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

    Blazor Grid 列非表示の例

    Grid のセットアップ

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

    <IgbGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
        <IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="ContactName" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="ContactTitle" Sortable=true></IgbColumn>
        <IgbColumn Field="City"  Sortable=true></IgbColumn>
        <IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true></IgbColumn>
        <IgbColumn Field="Address" Sortable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
        <IgbColumn Field="Country" Sortable=true></IgbColumn>
        <IgbColumn Field="Phone" Sortable=true></IgbColumn>
    </IgbGrid>
    

    ツールバーの列非表示 UI

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

    これには、IgbGrid 内に IgbGridToolbarActionsIgbGridToolbarHiding の両方を設定することだけです。ツールバーにタイトルを追加するには、IgbGridToolbarTitle を設定し、Grid のラッパーにカスタム スタイルを設定します。

    <IgbGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbGrid>
    

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

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

    <IgbGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbGrid>
    

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

    列の非表示の無効化

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

    <IgbGrid Data=northwindEmployees AutoGenerate=false>
        <IgbColumn Field="ContactName" Sortable=true DisableHiding=true></IgbColumn>
        <IgbColumn Field="ContactTitle" Sortable=true DisableHiding=true></IgbColumn>
    </IgbGrid>
    

    スタイル設定

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

    <IgbGrid class="grid"></IgbGrid>
    

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

    .grid  igx-column-actions {
        /* 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 リファレンス

    このトピックでは、IgbGrid のツールバーの定義済みの列非表示 UI の使用方法について学びました。以下は、列非表示 UI のその他の API です。

    • ColumnActionsComponent

    その他のコンポーネント (またはそのいずれか) で使用した API:

    IgbColumn プロパティ:

    IgbGridToolbar プロパティ:

    • showProgress

    IgbGridToolbar メソッド:

    IgbGrid イベント:

    • ColumnVisibilityChanged

    その他のリソース

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