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

    La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite el enlace de datos a fuentes de datos remotas con una línea de código. Con el origen de datos virtual de la tabla de datos Web Components, solo tiene que configurar la cuadrícula de Web Components con el URI remoto y la entidad de OData que desea que se devuelva, y la cuadrícula de Web Components hace el resto del trabajo por usted.

    Web Components Grid Binding Virtual Data Example

    Además de los paquetes de cuadrícula de datos principales y Web Components, también tendrá que instalar el paquete de fuentes de datos.
    • instalación npm --save igniteui-webcomponents-core
    • instalación npm --save igniteui-webcomponents-grids
    • instalación npm --guardar entradas-componentes-web-igniteui
    • instalación npm --save igniteui-webcomponents-datasources

    Component Modules

    RequiereIgcDataGridComponent los siguientes módulos:

    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

    Ahora que se ha importado el módulo de cuadrícula de datos Web Components, el siguiente paso es la configuración básica de la cuadrícula de Web Components que se vincula a datos remotos. Cree la fuente de datos virtual. Asigne la dirección URL desde la que se recuperarán los datos a la propiedad baseUri. Al establecer la propiedad entitySet, se informará de qué tabla se va a recuperar del origen de datos virtual.

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

    Asigne la fuente de datos a la cuadrícula.

    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