[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components Grid Binding Virtual Data

Ignite UI for Web Components 데이터 테이블/데이터 그리드는 한 줄의 코드로 원격 데이터 소스에 대한 데이터 바인딩을 지원합니다. Web Components 데이터 테이블의 가상 데이터 소스를 사용하면 원격 URI와 반환할 OData 엔터티를 사용하여 Web Components 그리드를 구성하기만 하면 Web Components 그리드가 나머지 작업을 수행합니다.

Web Components Grid Binding Virtual Data Example

코어 및 Web Components 데이터 그리드 패키지 외에도 datasources 패키지를 설치해야 합니다.

npm 설치 --igniteui-웹 구성 요소-코어 저장
npm install --igniteui-webcomComponents-grids 저장
npm 설치 --igniteui-웹 구성요소-입력 저장
npm install --igniteui-webcomComponents-datasources 저장

Component Modules

IgcDataGridComponent 다음 모듈이 필요합니다.

import './odatajs-4.0.0';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { ODataVirtualDataSource } from 'igniteui-webcomponents-dataSource';

ModuleManager.register(IgcDataGridModule);

Code Snippet

이제 Web Components 데이터 그리드 모듈을 가져왔으므로 다음 단계는 원격 데이터에 바인딩하는 Web Components 그리드의 기본 구성입니다. 가상 데이터 소스를 생성합니다. 데이터를 검색할 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;

API References

IgcDataGridComponent