Web Components Hierarchical Grid の列非表示

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

    Web Components Hierarchical Grid 列非表示の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Hierarchical Grid のセットアップ

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

    <igc-hierarchical-grid auto-generate="false" primary-key="ID" allow-filtering="true" name="hierarchicalGrid1" id="hierarchicalGrid1">
    <igc-column field="Artist" header="Artist" data-type="string" sortable="true"></igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"></igc-column>
    <igc-column field="Debut" header="Debut" data-type="number" hidden="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" sortable="true"> </igc-column>
</igc-hierarchical-grid>
html
    Ignite UI for Web Components | CTA Banner

    ツールバーの列非表示 UI

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

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

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>
html

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

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

    <igc-hierarchical-grid id="hierarchicalGrid1">
    <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-hierarchical-grid>
html

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

    列の非表示の無効化

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

    <igc-hierarchical-grid>
    <igc-column field="Artist" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyAwards" data-type="String" sortable="true" disable-hiding="true"></igc-column>

    <igc-row-island>
        <igc-column field="Album" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    </igc-row-island>
</igc-hierarchical-grid>
html

    スタイル設定

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

    <igc-hierarchical-grid class="hierarchical-grid"></igc-hierarchical-grid>
html

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

    #hierarchicalGrid {
    /* 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;
}
css

    デモ

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

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

    • ColumnActionsComponent

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

    IgcColumnComponent プロパティ:

    IgcGridToolbar プロパティ:

    • showProgress

    IgcGridToolbar メソッド:

    IgcHierarchicalGridComponent イベント:

    • ColumnVisibilityChanged

    その他のリソース

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