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 リファレンス
IgrButton
ColumnChooserText
ColumnChooserTitle
IgrColumnChooser
columnHidingAnimationMode
columnShowingAnimationMode
IgrDataGridToolbar