Enabling Column Hiding in Ignite UI for Angular Grid

Ignite UI for Angular Grid é o Angular Grid mais rápido que existe.  Ele não apenas é rápido, mas também é muito fácil de usar o igxGrid em seu aplicativo. Ignite UI for Angular classe de componente Grid é nomeada como igxGrid e no modelo pode ser usada como <igx-grid></igx-grid>

Saiba mais sobre Ignite UI for Angular Grid aqui

Etapa 1: adicionar Ignite UI for Angular em Angular projeto

Existem três maneiras de adicionar uma grade igx a um projeto Angular:

1. Se estiver iniciando um novo projeto, use a CLI do Ignite UI para estruturar o projeto. Você pode usar opções de linha de comando para adicionar o igx-grid, incluindo a instalação de dependência.
2. Em um projeto existente, você pode usar a extensão Ignite UI for Angular Toolbox para adicionar uma grade igx no projeto.
3. Você pode usar o npm para instalar Ignite UI for Angular dependências em seu projeto.

Etapa 2: Adicionar igx-grid a um projeto Angular

Para trabalhar com igxGrid, você precisa adicionar

1. igxGridModule
2. BrowserAnimationModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridModule } from 'igniteui-angular';

Após a importação, passe esses dois módulos para o array imports do Módulo. Em seguida, para vincular com igxGrid, vamos criar uma fonte de dados local no componente.

getData() {
    return [
        { model: 'BMW', color: 'Black', price: '20000' },
        { model: 'Audi', color: 'Blue', price: '10000' },
        { model: 'Merc', color: 'Red', price: '25000' },
        { model: 'Toyta', color: 'Green', price: '18000' },
        { model: 'GM', color: 'Blye', price: '10000' },
    ];
}

No gancho do ciclo de vida ngOnInit do componente, leia os dados da função getData() conforme mostrado no código listado abaixo. Definiremos a fonte de dados de igxGrid como localData usando a vinculação de propriedade no modelo.

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

Adicione igxGrid ao modelo, conforme mostrado na listagem de código abaixo.  Estamos configurando explicitamente as colunas de forma que possamos trabalhar com o recurso de ocultação de colunas.

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false">
    <igx-column field="model" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

No igxGrid acima;

1. As colunas são configuradas manualmente
2. Datasource is set using [data] property binding to localData
3. Como as colunas são configuradas manualmente, autoGenerate é definido como false.

Neste ponto da execução do aplicativo, você obterá o igxGrid em Angular aplicativo, conforme mostrado na imagem abaixo:

Step 3:  Enable Column Hiding

Ignite UI for Angular Grid, coloque a coluna que oculta a interface do usuário na barra de ferramentas da grade. Você pode usar o menu suspenso da barra de ferramentas da grade para mostrar ou ocultar colunas.  Então, o primeiro passo que você precisa é definir showToolbar da grade como true.

<igx-grid .... [showToolbar]="true" toolbarTitle="Cars" ...>
 
</igx-grid>

Depois de definir showToolbar como true, você precisa definir columnHiding como true.

<igx-grid .... [columnHiding]="true" ...>
 
</igx-grid>

Ao definir a combinação de showToolbar e columnHiding, você pode trabalhar com ocultação de coluna em igxGrid. Juntando tudo, com ocultação de coluna e configuração manual de coluna, igx-grid ficará como mostrado na listagem de código abaixo:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
            [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
      <igx-column field="model" header="Maker"></igx-column>
      <igx-column field="color" header="Color"></igx-column>
      <igx-column field="price" header="Price"></igx-column>
</igx-grid>

Neste ponto da aplicação em execução, você encontrará igxGrid renderizado conforme mostrado na imagem abaixo:

Você também pode desabilitar a ocultação de uma coluna definindo a propriedade [disabledHiding] como true. Portanto, você pode desabilitar a ocultação de um modelo de colunas, conforme mostrado na listagem de código abaixo:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
          [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
    <igx-column field="model" [disableHiding]="true" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

Neste ponto da aplicação em execução, você encontrará igxGrid renderizado com a coluna do modelo desabilitada para ocultação mostrada na imagem abaixo:

Além da coluna, ocultar muitos IgniteUI para Angular Grid tem muitos recursos, o que o torna a melhor grade para aplicativos corporativos. Confira todos os recursos aqui.

Agora você viu que ocultar colunas é tão simples quanto definir a associação de propriedades. Espero que você ache este post útil.