Write Applications Fast Using Ignite UI Grid

Configurando el proyecto

Descargue el proyecto inicial para esta lección haciendo clic aquí. Si la configuración del proyecto es correcta, tendrá una aplicación Angular ejecutándose como se muestra en la imagen a continuación:

Paso 1 Importar y declarar el componente

Para trabajar con Ignite UI para componentes JavaScript Angular, debe importarlos y declararlos en el módulo. Por ejemplo, para usar el componente igGrid en una aplicación Angular, importe y declare IgGridComponent en el módulo de la aplicación.

En el proyecto, navegue hasta la carpeta de la aplicación Finance y luego a la carpeta de la aplicación. Abra el archivo app.module.ts y agregue las declaraciones de importación a continuación, justo después de las declaraciones de importación existentes.

import{IgGridComponent} from 'igniteui-angular2';
import {GridComponent} from './grid.component';

Después de importar los componentes requeridos, debe declararlos en el módulo de la aplicación. Agregue IgGridComponent y GridComponent en la matriz de declaración de AppModule. Modifique el decorador @NgModule en app.module.ts como se muestra a continuación:

@NgModule({ imports: [BrowserModule,HttpModule], declarations: [AppComponent, IgZoombarComponent, IgDataChartComponent, PriceChartComponent, InfoComponent, IndicatorChartComponent, VolumeChartComponent, IgGridComponent, GridComponent], providers: [AppService], bootstrap: [AppComponent] }) export class AppModule { }

Ha agregado IgGridComponent y GridComponent en la matriz de declaración del módulo AppModule. Examinaremos otros componentes y propiedades agregados (como proveedores) en lecciones posteriores.

Step 2 Create a Data Source

Necesita datos para vincularse a la cuadrícula. Estos datos pueden ser una matriz de JavaScript o una matriz de objetos JSON, y pueden ser locales o proporcionados por un servicio REST.

Idealmente, debería crear una función para devolver datos en un servicio Angular para poder usar la función de datos en múltiples componentes. Para esta lección, ya existe una función llamada getData en la clase GridComponent, que devuelve una matriz de objetos JSON.

En la carpeta de la aplicación, abra el archivo grid.component.ts y busque la función getData(). En lecciones posteriores, aprenderá cómo crear una cuadrícula que utilice datos de los servicios REST.

Step 3 Get Data

Para utilizar los datos devueltos por la función getData(), llame a la función dentro del enlace del ciclo de vida Angular ngOnInit() y asigne un valor devuelto a la propiedad GridComponent.

Obtenga más información sobre los ganchos Angular Life Cycle.

En la carpeta de la aplicación, abra el archivo grid.component.ts y modifique la función ngOnInit() como se muestra a continuación:

ngOnInit(){ this.stocks = this.getData(); }

Step 4 Create a Grid

El componente Ignite UI para JavaScript Angular Grid se puede utilizar como cualquier otro componente. En la carpeta de la aplicación, abra el archivo grid.component.html y agregue el código como se muestra a continuación:

<ig-grid widgetId="grid1" [dataSource]="stocks" [autoGenerateColumns]="true">

Paso 5 Usar en una aplicación

Para usar GridComponent en una aplicación: en la carpeta de la aplicación, abra el archivo app.component.html y agregue el código que se muestra a continuación, al final de todo el marcado, debajo del elemento.

<grid></grid>

Navegue hasta la aplicación y desplácese hacia abajo hasta la parte inferior de la página para encontrar la cuadrícula agregada como se muestra en la imagen a continuación:

Paso 6 Configurar las columnas de la cuadrícula

En el paso 4, creó una cuadrícula estableciendo la propiedad autoGenerateColumns en verdadero. Las columnas de la cuadrícula se generaron automáticamente, pero también puede configurar las columnas manualmente. Puede configurar columnas y otras funciones como paginación, clasificación y filtrado de la cuadrícula en la clase de componente.

Para configurar columnas: en la carpeta de la aplicación, abra el archivo grid.component.ts y actualice la función ngOnInit() en el archivo grid.component.ts con la siguiente lista:

ngOnInit() { this.stocks = this.getData(); this.gridId = "Grid1"; this.gridOptions = { dataSource: this.stocks, autoGenerateColumns: false, columns: [ { headerText: "CLOSE", key: "Close", dataType: "number" }, { headerText: "DATE", key: "Date", dataType: "string" }, { headerText: "HIGH", key: "High", dataType: "number" }, { headerText: "LOW", key: "Low", dataType: "number" }, { headerText: "OPEN", key: "Open", dataType: "number" }, { headerText: "VOLUME", key: "Volume", dataType: "number" } ] } }

Paso 7 Modificar la cuadrícula con columnas configuradas

Las opciones de cuadrícula Angular Ignite UI para JavaScript y las propiedades widgetId están habilitadas para el enlace de datos bidireccional, por lo que cualquier cambio en la fuente se reflejará en la cuadrícula. Para configurar opciones y propiedades de widgetId: en la carpeta de la aplicación, abra el archivo grid.component.html y modifíquelo como se muestra a continuación:

<ig-grid [(options)]= "gridOptions" [(widgetId)]="gridId">

Navegue hasta la aplicación y desplácese hasta la parte inferior de la página para encontrar la cuadrícula agregada como se muestra a continuación: