React Grid 列選択の概要

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

    React Grid 列選択の例

    ツールバーの列選択 UI

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

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

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

    コード スニペット

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

    <IgrDataGridToolbar ref={this.onToolbarRef}
        toolbarTitle="Grid Title"
        columnChooser="true"
        columnChooserText="Columns"
        columnChooserTitle="Column Chooser">
    </IgrDataGridToolbar>
    <IgrDataGrid
        ref={this.onGridRef}
        height="calc(100% - 40px)"
        dataSource={this.data}
        autoGenerateColumns="true"
        columnHidingAnimationMode="SlideOver">
    </IgrDataGrid>
    
    import { IgrDataGrid } from 'igniteui-react-grids';
    import { IgrDataGridToolbar } from 'igniteui-react-grids';
    
    public grid : IgrDataGrid;
    public toolbar: IgrDataGridToolbar;
    
    this.onGridRef = this.onGridRef.bind(this);
    this.onToolbarRef = this.onToolbarRef.bind(this);
    
    
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
        if (this.toolbar != null) {
            this.toolbar.targetGrid = this.grid;
            this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
    
            let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent;
            productNameColumn.isHidden = true;
        }
    }
    
    public onToolbarRef(toolbar: IgrDataGridToolbar) {
        this.toolbar = toolbar;
        if (this.grid != null) {
        this.toolbar.targetGrid = this.grid;
        this.toolbar.columnChooser = "true";
        this.toolbar.toolbarTitle = "Grid Title";
        this.toolbar.columnChooserText = "Column Chooser";
        this.toolbar.columnChooserTitle = "Column Chooser";
        }
    }
    

    シンプルな列選択

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

    サンプル

    コード スニペット

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

    <IgrColumnChooser
        ref={this.onColumnChooserRef}
        height="100%"
        width="250px"
        title="Column Chooser"
        showAllText="Show All"
        hideAllText="Hide All">
    </IgrColumnChooser>
    <IgrDataGrid
        ref={this.onGridRef}
        height="100%"
        width="100%"
        dataSource={this.data}
        autoGenerateColumns="false"
        columnHidingAnimationMode="SlideOver">
        <IgrTextColumn isHidden="true" field="ProductPrice" headerText="Product Price"/>
    </IgrDataGrid>
    
    import { IgrDataGrid } from 'igniteui-react-grids';
    import { IgrColumnChooser } from 'igniteui-react-grids';
    import { ColumnMovingAnimationMode } from 'igniteui-react-grids';
    
    public grid : IgrDataGrid;
    public columnChooser: IgrColumnChooser;
    
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
        if (this.columnChooser) {
            this.columnChooser.targetGrid = this.grid;
            this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
        }
    }
    
    public onColumnChooserRef(columnChooser: IgrColumnChooser) {
        this.columnChooser = columnChooser;
        if (this.grid) {
            this.columnChooser.targetGrid = this.grid;
            this.columnChooser.showAllText = "Show All";
            this.columnChooser.hideAllText = "Hide All";
        }
    }
    

    API リファレンス