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 を表示します。このボタンは、非表示列の合計も表示します。ツールバーが作成されていない場合、columnChooser プロパティを有効にしても効果はなく、ボタンを非表示にします。

    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;
    }
    

    シンプルな列選択

    ツールバーなしで columnChooser 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;
    }