[!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 リファレンス
IgcButtonComponent
ColumnChooserText
ColumnChooserTitle
IgcColumnChooserComponent
columnHidingAnimationMode
columnShowingAnimationMode
IgcDataGridToolbarComponent