Trabalhando com colunas geradas automaticamente na grade Ignite UI for Angular

Ignite UI for Angular Grid é a grade de dados mais rápida disponível. Ele não apenas ajuda a executar aplicativos mais rapidamente, mas também permite que você, como desenvolvedor, escreva aplicativos mais rapidamente.

Para vê-lo em ação, suponha que você tenha uma fonte de dados, conforme mostrado na listagem de código abaixo:

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

Você pode renderizar os dados acima em igxGrid simplesmente definindo uma instância do igxGrid no modelo do componente e vinculando a propriedade data à matriz de produtos. É simples de adicionar, conforme mostrado na listagem de código abaixo:

<igx-grid [data]="products"
           [autoGenerate]="true"
           width="960px">
 </igx-grid>

Ao definir apenas as propriedades data e autoGenere, você deve obter dados renderizados em igxGrid, conforme mostrado abaixo:

Como a propriedade autoGenerate é definida como true, Ignite UI gerará colunas com propriedades padrão configuradas. No entanto, Ignite UI for Angular Grid possui vários recursos, como:

• Filtragem
• Paginação
• Classificação
• Fixação de coluna
• Ocultação de coluna
• Column template
• Modelo de cabeçalho etc. e muito mais.

Como desenvolvedor, talvez você queira configurar esses recursos dependendo de seus requisitos de negócios. Existem duas maneiras de fazer isso:

1. Defina a propriedade autoGenerate como false e configure as colunas manualmente. Saiba mais sobre isso aqui.
2. Se as colunas forem geradas automaticamente, configure os recursos acima em tempo de execução na classe de componente.

Podemos configurar recursos essenciais em tempo de execução quando as colunas são inicializadas. Ignite UI for Angular igxGridComponent fornece um evento onColumInit.

No momento da inicialização da coluna, o evento onColumnInit é executado. Qualquer lógica de negócios que você deseja executar neste momento, você deve escrever dentro deste evento. Por exemplo, podemos escrever código para habilitar vários recursos, conforme mostrado na imagem abaixo:

Você pode manipular o evento na classe de componente, conforme mostrado na listagem de código abaixo:

Se você deseja fixar uma coluna específica em um local específico, pode fazer isso da seguinte maneira

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Title') {
        column.pin();
    }
}

Você encontrará a coluna Título fixada no lado esquerdo, conforme mostrado abaixo:

Você pode ocultar uma coluna em tempo de execução durante a inicialização definindo o valor da propriedade oculta como true:

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Id') {
        column.hidden = true;
    }
}

Você também pode tornar uma coluna editável definindo a propriedade editable como true:

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'ExpiryDate') {
        column.editable = true;
    }
}

Quando igxGrid é renderizado, a coluna ExpiryDate deve ser editável, conforme mostrado na imagem abaixo. Você também pode notar que, no modo de edição, Ignite UI oferece a opção de editar a coluna do tipo de data em igxCalandar

Como você pode ver, é muito fácil configurar vários recursos em colunas geradas automaticamente.  Além de configurar recursos, você também pode formatar dados de coluna para uma saída especificada. Em Angular, os tubos fazem isso. Portanto, para colunas geradas automaticamente, você aplica pipes usando a função formatador.

Digamos que você queira,

1. Display ExpiryDate in specific date format
2. Exibir título em maiúsculas

Para isso, você pode usar a função formatter no evento onColumnInit, conforme mostrado na imagem abaixo. Aqui estamos usando toLocaleDateString para converter a saída de data para o formato de data local e toUpperCase para exibir a saída em maiúsculas.

Depois de aplicar o formatador acima, você encontrará que os dados na coluna Título estão formatados em maiúsculas e os dados da coluna ExpiryDate estão formatados no formato de string de data local.

Você também pode usar o formatador para lógica de negócios complexa. Você pode passar várias instruções como lógica usando a função de seta do formatador. Por exemplo, para a coluna Preço, se os dados de preço forem inferiores a 50, você precisará adicionar um texto "Com desconto" ao lado dos dados de preço. Você pode fazer isso muito rapidamente, conforme mostrado na imagem abaixo:

Você obterá Ignite UI for Angular Grid renderizado com o formatador aplicado, conforme mostrado na imagem abaixo:

Conforme discutido anteriormente, não apenas formate os dados da coluna, mas também você pode utilizar outros recursos. Muito suavemente, você pode realizar várias outras operações, como:

• Setting a summary
• Filtros de configuração
• Formatadores de configuração
• Setting width
• Setting header value
• Configurando o modelo de cabeçalho
• Configurando bens móveis
• Setting hidden attributes etc.

Abordaremos os recursos acima individualmente em outras postagens do blog. No entanto, é importante que você entenda como configurar recursos quando Ignite UI for Angular colunas de grade estão sendo inicializadas, conforme discutido neste blog.  Você pode baixar uma avaliação de 30 dias do Ignite UI for Angular aqui. Espero que você ache este post útil.