Write Applications Fast Using Ignite UI Grid

Configurando o projeto

Baixe o projeto inicial desta lição clicando aqui. Se a configuração do projeto estiver correta, você terá um aplicativo Angular em execução, conforme mostrado na imagem abaixo:

Passo 1 Importar e declarar o componente

Para trabalhar com componentes Angular Ignite UI para JavaScript, você deve importá-los e declará-los no módulo. Por exemplo, para usar o componente igGrid em um aplicativo Angular, importe e declare o IgGridComponent no módulo do aplicativo.

No projeto, navegue até a pasta Aplicativo de Finanças e, em seguida, até a pasta do aplicativo. Abra o arquivo app.module.ts e adicione as instruções de importação abaixo, logo após as instruções de importação existentes.

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

Depois de importar os componentes necessários, você deve declará-los no módulo do aplicativo. Adicione IgGridComponent e GridComponent na matriz de declaração do AppModule. Modifique @NgModule decorador em app.module.ts conforme mostrado abaixo:

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

Você adicionou IgGridComponent e GridComponent na matriz de declaração do módulo AppModule. Examinaremos outros componentes e propriedades adicionados (como provedores) nas lições subsequentes.

Step 2 Create a Data Source

Você precisa de dados para se associar à grade. Esses dados podem ser uma matriz JavaScript ou uma matriz de objetos JSON e podem ser locais ou fornecidos por um serviço REST.

Idealmente, você deve criar uma função para retornar dados em um serviço Angular para que você possa usar a função de dados em vários componentes. Para esta lição, já existe uma função chamada getData na classe GridComponent, que retorna uma matriz de objetos JSON.

Na pasta do aplicativo, abra o grid.component.ts de arquivos e encontre a função getData(). Em lições posteriores, você aprenderá a criar uma grade que usa dados dos serviços REST.

Step 3 Get Data

Para usar os dados retornados da função getData(), chame a função dentro Angular gancho do ciclo de vida ngOnInit() e atribua um valor retornado à propriedade GridComponent.

Saiba mais sobre Angular ganchos do Ciclo de Vida.

Na pasta app, abra o grid.component.ts de arquivos e modifique a função ngOnInit() conforme mostrado abaixo:

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

Step 4 Create a Grid

O componente Ignite UI para JavaScript Angular Grid pode ser usado como qualquer outro componente. Na pasta do aplicativo, abra o grid.component.html de arquivos e adicione o código conforme mostrado abaixo:

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

Passo 5 Uso em um aplicativo

Para usar o GridComponent em um aplicativo: Na pasta do aplicativo, abra o arquivo app.component.html e adicione o código mostrado abaixo, no final de toda a marcação, abaixo do elemento.

<grid></grid>

Navegue até o aplicativo e role para baixo até a parte inferior da página para encontrar a grade adicionada conforme mostrado na imagem abaixo:

Passo 6 Configurar colunas da grade

Na Etapa 4, você criou uma grade definindo a propriedade autoGenerateColumns como true. As colunas da grade foram geradas automaticamente, mas você também pode configurar as colunas manualmente. Você pode configurar colunas e outros recursos, como paginação, classificação e filtragem da grade na classe de componente.

Para configurar colunas: Na pasta app, abra grid.component.ts arquivo e atualize a função ngOnInit() em grid.component.ts arquivo com a listagem abaixo:

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" } ] } }

Passo 7 Modificar a grade com colunas configuradas

Ignite UI para as opções de grade Angular do JavaScript e as propriedades widgetId são habilitadas para vinculação de dados bidirecional, portanto, todas as alterações na origem serão refletidas na grade. Para definir opções e propriedades widgetId: Na pasta do aplicativo, abra o grid.component.html do arquivo e modifique-o conforme mostrado abaixo:

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

Navegue até o aplicativo e role até a parte inferior da página para encontrar a grade adicionada conforme mostrado abaixo: