Web Components Grid の列非表示
Ignite UI for Web Components には組み込み列非表示 UI があり、これを Web Components Grid のツールバーから使用して列の表示状態を変更できます。開発者は、必要に応じてページ内の任意の場所に列非表示 UI を柔軟に定義できます。Web Components Grid 列の非表示機能は、グリッドのサイズを小さくし、冗長なフィールドをタブで移動する必要をなくしたい場合に特に便利です。
Web Components Grid 列非表示の例
Grid のセットアップ
IgcGridComponent
を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。
<igc-grid id="grid" auto-generate="false" width="100%" height="560px" allow-filtering="true">
<igc-column field="ID" data-type="String" sortable="true" hidden="true"></igc-column>
<igc-column field="ContactName" data-type="String" sortable="true" hidden="true"></igc-column>
<igc-column field="ContactTitle" data-type="String" sortable="true"></igc-column>
<igc-column field="City" data-type="String" sortable="true"></igc-column>
<igc-column field="CompanyName" data-type="String" sortable="true"></igc-column>
<igc-column field="Fax" data-type="String" sortable="true"></igc-column>
<igc-column field="Address" data-type="String" sortable="true"></igc-column>
<igc-column field="PostalCode" data-type="String" sortable="true"></igc-column>
<igc-column field="Country" data-type="String" sortable="true"></igc-column>
<igc-column field="Phone" data-type="String" sortable="true"></igc-column>
</igc-grid>
ツールバーの列非表示 UI
定義済みの列非表示 UI は、IgcGridComponent
のツールバーの DropDown
内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。
これには、IgcGridComponent
内に IgcGridToolbarActions
と IgcGridToolbarHiding
の両方を設定することだけです。ツールバーにタイトルを追加するには、IgcGridToolbarTitle
を設定し、Grid のラッパーにカスタム スタイルを設定します。
<igc-grid>
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-grid>
IgcGridComponent
にはツールバーの列非表示 UI に便利なプロパティがあります。
title
プロパティを使用して、ツールバーのドロップダウン ボタンに表示されるタイトルを設定します。
<igc-grid id="grid">
<igc-grid-toolbar>
<igc-grid-toolbar-actions>
<igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
</igc-grid>
このトピックのはじめにあるコードの結果は Web Components 列非表示の例のセクションで確認できます。
列の非表示の無効化
列の disableHiding
プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。
<igc-grid>
<igc-column field="ContactName" data-type="String" sortable="true" disable-hiding="true"></igc-column>
<igc-column field="ContactTitle" data-type="String" sortable="true" disable-hiding="true"></igc-column>
</igc-grid>
スタイル設定
グリッドは、利用可能な CSS 変数の一部を設定することでさらにカスタマイズできます。 これを実現するために、最初にグリッドに割り当てるクラスを使用します。
<igc-grid class="grid"></igc-grid>
次に、関連するコンポーネントに関連する 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 リファレンス
このトピックでは、IgcGridComponent
のツールバーの定義済みの列非表示 UI の使用方法について学びました。以下は、列非表示 UI のその他の API です。
ColumnActionsComponent
その他のコンポーネント (またはそのいずれか) で使用した API:
IgcColumnComponent
プロパティ:
IgcGridToolbar
プロパティ:
showProgress
IgcGridToolbar
メソッド:
IgcGridComponent
イベント:
ColumnVisibilityChanged
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。