[!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

    A Tabela de Dados/Grade de Dados do Ignite UI for Web Components dá suporte à vinculação de dados a fontes de dados remotas com uma linha de código. Com a Fonte de Dados Virtual da tabela de dados Web Components, basta configurar a grade Web Components com seu URI remoto e qual Entidade OData você gostaria de retornar, e a grade Web Components faz o restante do trabalho para você.

    Web Components Grid Binding Virtual Data Example

    Além dos pacotes de grade de dados core e Web Components, você também precisará instalar o pacote de fontes de dados.
    • npm install --save igniteui-webcomponents-core
    • npm install --save igniteui-webcomponents-grids
    • npm install --save igniteui-webcomponents-inputs
    • npm install --save igniteui-webcomponents-datasources

    Component Modules

    O IgcGridComponent requer os seguintes módulos:

    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);

    Code Snippet

    Agora que o módulo de grade de dados Web Components foi importado, a próxima etapa é a configuração básica da grade Web Components que se vincula a dados remotos. Crie a fonte de dados virtual. Atribua a url de onde os dados serão recuperados para a propriedade baseUri. A configuração da propriedade entitySet informará qual tabela recuperar da fonte de dados virtual.

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

    Atribua a fonte de dados à grade.

    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