このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Web Components グリッド仮想データのバインディン

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

    Web Components グリッド仮想データのバインディンの例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for 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

    モジュールの要件

    IgcGridComponent を作成するには、以下のモジュールが必要です。

    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);
ts
    Ignite UI for Web Components | CTA Banner

    コード スニペット

    グリッド モジュールがインポートされました。以下のステップはリモート データにバインドするグリッドの基本的な設定です。仮想データ ソースを作成します。データが取得される URL を baseUri プロパティに割り当てます。entitySet プロパティを設定すると、仮想データ ソースから取得するテーブルがわかります。

    <igc-data-grid id="grid"
    width="100%"
    height="100%"
    default-column-min-width=200>
</igc-data-grid>
html

    データ ソースをグリッドに割り当てます。

    private virtualData: ODataVirtualDataSource;
// ...
const vds = new ODataVirtualDataSource();
vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc");
vds.entitySet = ("Orders");
this.virtualData = vds;
ts
    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;
ts

    API リファレンス