Angular Tree Grid Column Hiding

A Ignite UI for Angular Tree Grid fornece umIgxColumnActionsComponentIgxColumnHidingDirective dispositivo que permite aos usuários realizar ocultação de colunas diretamente pela interface do usuário ou usando o componente Angular. A Grade da Interface Material possui uma interface de ocultação de colunas embutida, que pode ser usada através da barra de ferramentas da Grade de Árvore para alterar o estado visível das colunas. Além disso, os desenvolvedores sempre podem definir a coluna que esconde a interface como um componente separado e colocá-la onde quiserem na página.

Angular Tree Grid Column Hiding Example

Tree Grid Setup

Vamos começar criando nossa Grade de Árvore e vinculando-a aos nossos dados. Também habilitaremos a filtragem e a classificação das colunas.

<!--columnHiding.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%"
    height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-tree-grid>

Toolbar's Column Hiding UI

A interface de ocultação de colunas embutida está colocada dentro eIgxDropDownComponent na barra de ferramentas da Grade de Árvore. Podemos mostrar/ocultar a interface de ocultação de colunas usando exatamente esse menu suspenso. Para isso, tudo o que precisamos fazer é definir tanto oIgxGridToolbarActionsComponent quanto oIgxGridToolbarHidingComponent interior da Grade da Árvore. Também adicionaremos um título à nossa barra de ferramentas usando oIgxGridToolbarTitleComponent e um estilo personalizado para o wrapper da nossa Tree Grid.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-tree-grid ...>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        ...
    </igx-tree-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

A Grade de Árvore nos oferece algumas propriedades úteis quando se trata de usar a interface de ocultação de colunas da barra de ferramentas. Usando aigx-grid-toolbar-hiding title propriedade, definiremos o título que será exibido dentro do botão suspenso da barra de ferramentas.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-tree-grid>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    </igx-tree-grid>
</div>

Usando acolumnsAreaMaxHeight propriedade do IgxGridToolbarHidingComponent, podemos definir a altura máxima da área que contém as ações da coluna. Assim, se tivermos muitas ações e nem todas caberem no container, uma barra de rolagem vai aparecer, permitindo que possamos deslizar para qualquer ação que quisermos.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

Para usar o conjunto expandido de funcionalidades da interface de ocultação de colunas, podemos usar a propriedade IgxColumnActionsComponentcolumnsAreaMaxHeight. Dessa forma, podemos usá-lo conforme os requisitos da nossa aplicação.

Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de ocultação de coluna Angular.

Custom Column Hiding UI

Digamos que queiramos definir manualmente o nossoIgxColumnActionsComponent, adicionar oIgxColumnHidingDirective para que ele saiba qual seria seu propósito e colocá-lo em qualquer lugar da página. Primeiro, porém, precisamos importar oIgxColumnActionsModule.

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular/grids/core';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxColumnActionsModule],
})
export class AppModule {}

Agora vamos criar o nossoIgxColumnActionsComponent. Na nossa aplicação, vamos colocá-la ao lado da grade (o que não acontece com a coluna da barra de ferramentas que esconde a interface, onde o componente está dentro de um menu suspenso por design). Também vamos definir acolumns propriedade do componente para as colunas da nossa Grade de Árvore e incluir alguns estilos personalizados para deixar nossa aplicação ainda melhor!

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-tree-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-actions {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

Add title and filter prompt

Mais algumas coisas que podemos fazer para enriquecer a experiência do usuário do nosso componente de ocultação de colunas é definir astitle propriedades efilterColumnsPrompt. Otitle é exibido no topo e ofilterColumnsPrompt texto do prompt que aparece na entrada do filtro da nossa interface de ocultação da coluna.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-actions>
</div>

Add column display order options

Também podemos permitir que o usuário escolha a ordem de exibição das colunas na interface de ocultação das colunas. Para esse fim, usaremos acolumnDisplayOrder propriedade , que é uma propriedade do tipo enumeração e possui as seguintes opções:

Alfabético (ordene as colunas em ordem alfabética)
DisplayOrder (ordene as colunas de acordo com a forma como são exibidas na Grade de Árvore)

Vamos criar alguns botões de opção bem projetados para nossas opções! Só temos que ir em frente e obter o módulo IgxRadio.

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular/radio';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

Agora tudo o que precisamos fazer é vincular achecked propriedade dos dois botões de opção com condições diferentes e lidar com seus eventos de clique.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

Disable hiding of a column

Podemos facilmente impedir que o usuário oculte colunas através da interface de ocultação de colunas simplesmente definindo a propriedade delesdisableHiding como true.

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-tree-grid ... >
        ...
        <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-tree-grid>
</div>

Se tudo correr bem, é assim que nosso componente de interface do usuário de ocultação de coluna deve ficar:

Estilização

Para começar a estilizar o componente de ações da coluna, precisamos importar o arquivo de índice, onde todas as funções do tema e mixins de componentes residem:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Usando a abordagem mais simples, criamos um novo tema que estende oscolumn-actions-theme e aceita os$title-color parâmetros e$background-color.

$custom-column-actions-theme: column-actions-theme(
  $background-color: #292826,
  $title-color: #ffcd0f
);

Como visto, ocolumn-actions-theme controle apenas as cores do contêiner de ações da coluna, mas não afeta os botões, caixas de seleção e o grupo de entrada dentro dele. Digamos que quisermos estilizar os botões também, então vamos criar um novo tema de botão:

$custom-button: button-theme(
  $foreground: #292826, 
  $disabled-foreground: rgba(255, 255, 255, .54)
);

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

Neste exemplo, só mudamos a cor do texto dos botões planos e o botão desativou a cor, mas issobutton-theme fornece muito mais parâmetros para controlar o estilo dos botões.

O último passo é incluir os mixins de componentes, cada um com seu respectivo tema:

@include css-vars($custom-column-actions-theme);

.igx-column-actions {
  @include css-vars($custom-button);
}

Note

Incluímos o tema de botão criado dentro dele.igx-column-actions, para que apenas os botões que escondem a coluna sejam estilizados. Caso contrário, outros botões na grade também seriam afetados.

Note

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário parapenetrate esse encapsulamento usando::ng-deep para os componentes dentro do componente de ação da coluna (botões, caixas de seleção... etc):

@include css-vars($custom-column-actions-theme);

:host {
  ::ng-deep {
    .igx-column-actions {
      @include css-vars($custom-button);
    }
  }
}

Demo

API References

Neste artigo, aprendemos como usar a interface do usuário de ocultação de coluna interna na barra de ferramentas da Grade de Árvore e também a definimos como um componente separado. Introduzimos uma interface do usuário que permite ao usuário escolher entre diferentes ordens de coluna e definimos nosso próprio título personalizado e filtramos textos de prompt. Também usamos um componente de Ignite UI for Angular adicional - o botão IgxRadio.

A coluna que oculta a interface do usuário tem mais algumas APIs para explorar, listadas abaixo.

Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

IgxTreeGridComponent properties: