Run Fast Using Virtualization in Ignite UI for JavaScript Grids

Configurando o projeto

Você pode baixar o projeto inicial desta lição clicando aqui. (Você também pode baixar o projeto final clicando aqui.)

Após baixar o projeto, navegue até o diretório e execute os comandos abaixo:

• npm install
• npm start

Execute o comando npm install para instalar todas as dependências e execute o comando npm start para executar o aplicativo Angular. Se a configuração do projeto estiver correta, você terá um aplicativo Angular em execução com uma grade, conforme mostrado abaixo. Se você receber um erro durante a execução do aplicativo, pare e execute o comando npm start novamente.

O projeto inicial inclui uma grade que foi criada com um grande conjunto de dados. Como a virtualização ainda não está habilitada na grade, a grade está levando algum tempo para renderizar todos os registros. Além disso, está renderizando todas as linhas de uma vez. Para 5.000 linhas, a grade está criando 5.000 elementos de linha no DOM, o que faz com que o aplicativo seja executado de forma mais lenta e menos eficiente. Configurar a virtualização na grade permitirá que você execute o aplicativo mais rapidamente, mesmo com um conjunto muito grande de dados.

O projeto inicial desta lição contém código para trabalhar com a API REST em um aplicativo Angular para criar um grande conjunto de dados. Para trabalhar com a API REST e a comunicação do servidor, Angular fornece uma classe http.

Saiba mais sobre a classe http e a comunicação do servidor em Angular.

Passo 1 Habilitando a virtualização fixa

Para habilitar a virtualização, você deve definir essas três propriedades da grade Ignite UI para JavaScript.

1. virtualizationMode
2. virtualization
3. height

Você deve definir a propriedade height da grade para habilitar a virtualização. Se a propriedade height não estiver definida e a virtualização for verdadeira, Ignite UI para JavaScript gerará um erro.

Para habilitar a virtualização de linha e coluna, defina o valor da propriedade de virtualização como true. A propriedade de virtualização também pode ser definida como um valor numérico para que a virtualização seja habilitada sempre que o número de registros na fonte de dados exceder um número especificado.

Para habilitar a virtualização fixa, defina as seguintes propriedades da grade:

• Defina a propriedade de virtualização como "true".
• Set the virtulizationMode property to “fixed”.
• Defina a propriedade height para algum valor de pixel (aqui ela será definida como "300px").

Para configurar todas essas propriedades da grade: Na pasta do aplicativo, abra o arquivo grid.component.ts e atualize a função getGridOptions(), conforme mostrado na listagem destacada abaixo. Você está adicionando mais três propriedades às opções de grade existentes.

getGridOptions() {
  return {
    width: "100%",
    autoGenerateColumns: false,
    height: "300px",
    virtulization: true,
    virtualizationMode: "fixed",
    columns: [
      { headerText: "ID", key: "Id", dataType: "string",width:"10%" },
      { headerText: "CLOSE", key: "Close", dataType: "number",width:"15%" },
      { headerText: "DATE", key: "Date", dataType: "string",width:"15%" },
      { headerText: "HIGH", key: "High", dataType: "number",width:"15%" },
      { headerText: "LOW", key: "Low", dataType: "number",width:"15%" },
      { headerText: "OPEN", key: "Open", dataType: "number",width:"15%" },
      { headerText: "VOLUME", key: "Volume", dataType: "number",width:"15%"}
    ]
  };
}

Para testar a virtualização fixa, navegue até o aplicativo e role para baixo para encontrar a grade configurada com a virtualização fixa adicionada, conforme mostrado abaixo:

Passo 2 Habilitando a virtualização contínua

Para habilitar a virtualização contínua, defina as seguintes propriedades da grade:

• Defina a propriedade rowVirtualization como "true".
• Defina a propriedade virtulizationMode como "contínuo".
• Defina a propriedade height para algum valor de pixel (aqui ela será definida como "300px").

Para configurar todas essas propriedades da grade: Na pasta app, abra o arquivo grid.component.ts e atualize a função getGridOptions() conforme mostrado na listagem destacada abaixo:

getGridOptions() { return { width: "100%", autoGenerateColumns: false, height: "300px", rowVirtualization: true, virtualizationMode: "continuous", columns: [ { headerText: "ID", key: "Id", dataType: "string" }, { 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" } ] }; }

Para testar a virtualização contínua, navegue até o aplicativo e role para baixo para encontrar a grade configurada com a virtualização contínua adicionada, conforme mostrado abaixo:

Na virtualização contínua, apenas uma parte do total de linhas na fonte de dados é renderizada no DOM. À medida que o usuário rola para cima e para baixo na grade, o recurso de virtualização determina se as linhas atuais são suficientes para exibir a parte seguinte ou anterior das linhas. Se novas linhas forem necessárias, a parte atual das linhas será excluída e a nova parte das linhas será criada.