[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Web Components Grid 列選択の概要

    Ignite UI for Web Components Data Grid は、IgcDataGridToolbarComponent コンポーネントまたはページのどこにでも配置できる columnChooser コンポーネントによって UI から列の表示/非表示を行う機能をサポートしています。列の IsHidden プロパティにより、手動生成の列に対してプログラムによって列の表示/非表示を設定することができます。IsHidden の値は columnChooser コンポーネントに反映されます。各方法は列の表示状態を変更するために使用できます。

    Web Components Grid 列選択の例

    ツールバーの列選択 UI

    列選択 UI は、グリッドとは別に IgcDataGridToolbarComponent コンポーネント内でアクセスできます。このため、ツールバーの columnChooser プロパティを true に設定します。 ツールバーは IgcButtonComponent を表示し、クリックすると列選択 UI を表示します。このボタンは、非表示列の合計も表示します。ツールバーが作成されていない場合、IgcColumnChooserComponent プロパティを有効にしても効果はなく、ボタンを非表示にします。

    IgcDataGridToolbarComponent は、toolbarTitle プロパティを使用してツールバーにタイトルを追加、columnChooserText プロパティを設定して IgcButtonComponent にテキストを配置、ColumnChooserTitle を設定して、タイトル ヘッダーを列選択 UI に追加などの追加プロパティを提供します。

    列選択は、グリッドの columnHidingAnimationMode および columnShowingAnimationMode プロパティを設定することでアニメーションで構成できます。

    コード スニペット

    以下は、データ グリッドの列選択ツールバー UI の実装方法を示します。

    <igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-chooser="true"
    column-chooser-text="Columns"
    column-chooser-title="Column Chooser">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin"
    column-hiding-animation-mode="SlideOver">
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcDataGridToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.isHidden = true;
    this.toolbar.columnChooser = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Choose Text";
    this.toolbar.columnChooserTitle = "Choose Title Text";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    シンプルな列選択

    ツールバーなしで IgcColumnChooserComponent UIを手動で表示し、ページの任意の場所に配置するとします。マークアップでコンポーネントのインスタンスを作成して簡単に行うことができます。

    サンプル

    コード スニペット

    以下は、データ グリッドの列選択 UI の実装方法を示します。

    <igc-column-chooser
    id="columnUI"
    height="100%"
    width="250px"
    title="Column Chooser"
    show-all-text="Show All"
    hide-all-text="Hide All">
</igc-column-chooser>
<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    data-source={this.data}
    auto-generate-columns="false"
    column-hiding-animation-mode="SlideOver">
    <igx-text-column is-hidden="true" field="ProductPrice" header-text="Product Price"><igc-text-column>
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private columnChooser: IgcColumnChooserComponent;

connectedCallback() {
    this.columnChooser.targetGrid = this.grid;
    this.columnChooser.showAllText = "Show All";
    this.columnChooser.hideAllText = "Hide All";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    API リファレンス