[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components Grid 列オプションの概要
Ignite UI for Web Components データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、およびソートの機能をサポートします。
列オプション UI を有効にするには、グリッドの isColumnOptionsEnabled
プロパティを true に設定します。
Web Components Grid 列オプションの例
列オプションの構成
列の IsFilteringEnabled
プロパティにより、列ごとにフィルタリングの有効/無効化を切り替えることができます。True または false に設定すると、列のオプション UI のフィルタリング セクションが表示または非表示になります。
headerClickAction
プロパティを使用すると、グリッド全体のソートの有効/無効化を切り替えることができます。これを None
に設定すると、グリッドのソートが完全に削除され、各列のオプション UI に反映されます。SortByOneColumnOnly
を設定すると、一度に 1 つの列のソートが有効になります。
コード スニペット
以下のコードは、グリッドと列を調整することにより、列オプション UI でフィルタリングとソートをプログラムで有効にする方法を紹介します。
import { HeaderClickAction } from 'igniteui-webcomponents-grids';
//enable column options
this.grid.isColumnOptionsEnabled="true";
//adjust filtering for column
let idColumn = this.grid.actualColumns.item(0);
idColumn.isFilteringEnabled="false";
//adjust sorting
this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly;
<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
header-click-action="SortByOneColumnOnly"
is-column-options-enabled="true">
<igc-text-column field="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>
API リファレンス
headerClickAction
isColumnOptionsEnabled
IsFilteringEnabled
SortByOneColumnOnly