이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

    Web Components Grid Binding Virtual Data

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

    Web Components 그리드 바인딩 가상 데이터 예시

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    코어 및 Web Components 데이터 그리드 패키지 외에도 datasources 패키지를 설치해야 합니다.
    • npm 설치 --igniteui-웹 구성 요소-코어 저장
    • npm install --igniteui-webcomComponents-grids 저장
    • npm 설치 --igniteui-웹 구성요소-입력 저장
    • npm install --igniteui-webcomComponents-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 배너

    코드 조각

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