Web Components グリッド仮想データのバインド
Ignite UI for Web Components Data Table / Data Grid は、1 行のコードでリモート データソースへのデータ バインドをサポートします。Web Components データ テーブルの仮想データソースを使用すると、リモート URI と返される Odata エンティティで Web Components グリッドを設定するだけで、残りの作業は Web Components グリッドが行います。
Web Components グリッド仮想データのバインドの例

コア パッケージとグリッド パッケージに加えて、データソース パッケージもインストールする必要があります。
- npm install --save igniteui-webcomponents-core
- npm install --save igniteui-webcomponents-grids
- npm install --save igniteui-webcomponents-inputs
- npm install --save igniteui-webcomponents-datasources
モジュールの要件
IgcDataGridComponent
を作成するには、以下のモジュールが必要です。
import './odatajs-4.0.0';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { ODataVirtualDataSource } from 'igniteui-webcomponents-dataSource';
ModuleManager.register(
IgcDataGridModule
)
コード スニペット
グリッド モジュールがインポートされました。以下のステップはリモート データにバインドするグリッドの基本的な設定です。仮想データソースを作成します。データが取得される URL を baseUri
プロパティに割り当てます。entitySet
プロパティを設定すると、仮想データソースから取得するテーブルがわかります。
<igc-data-grid id="grid"
width="100%"
height="100%"
default-column-min-width=200>
</igc-data-grid>
データソースをグリッドに割り当てます。
private virtualData: ODataVirtualDataSource;
// ...
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
this.virtualData = vds;
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = vds;