Angular Hierarchical Grid Column Hiding

A Grade Hierárquica Ignite UI for Angular fornece um IgxColumnActionsComponent com um IgxColumnHidingDirective que permite que os usuários executem a ocultação de colunas diretamente por meio da interface do usuário ou usando o componente Angular. A Grade de Interface do Usuário de Material tem uma interface de usuário de ocultação de coluna interna, que pode ser usada por meio da barra de ferramentas da Grade Hierárquica para alterar o estado visível das colunas. Além disso, os desenvolvedores sempre podem definir a interface do usuário de ocultação de coluna como um componente separado e colocá-la em qualquer lugar que desejarem na página.

Angular Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

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

<igx-hierarchical-grid class="hgrid" [data]="localdata"
        [height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>

    <igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column field="Photo">
        <ng-template igxCell let-cell="cell">
            <div class="cell__inner_2">
                <img [src]="cell.value" class="photo" />
            </div>
        </ng-template>
    </igx-column>
    <igx-column field="Debut" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Nominations" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Awards" [sortable]="true"></igx-column>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
        <igx-column field="Album" [sortable]="true"></igx-column>
        <igx-column field="Launch Date" [sortable]="true"></igx-column>
        <igx-column field="Billboard Review" [sortable]="true"></igx-column>
        <igx-column field="US Billboard 200" [sortable]="true"></igx-column>
        <igx-row-island [key]="'Songs'" [autoGenerate]="false">
            <igx-column field="No."></igx-column>
            <igx-column field="Title"></igx-column>
            <igx-column field="Released"></igx-column>
            <igx-column field="Genre"></igx-column>
        </igx-row-island>
    </igx-row-island>

    <igx-row-island [key]="'Tours'" [autoGenerate]="false">
        <igx-column field="Tour"></igx-column>
        <igx-column field="Started on"></igx-column>
        <igx-column field="Location"></igx-column>
        <igx-column field="Headliner"></igx-column>
    </igx-row-island>

</igx-hierarchical-grid>

Toolbar's Column Hiding UI

A interface do usuário interna de ocultação de coluna é colocada dentro de uma IgxDropDownComponent barra de ferramentas da grade hierárquica. Podemos mostrar/ocultar a interface do usuário de ocultação de coluna usando esse menu suspenso exato. Para isso, tudo o que precisamos fazer é definir o e o IgxGridToolbarActionsComponent IgxGridToolbarHidingComponent interior da Grade Hierárquica. Também adicionaremos um título à nossa barra de ferramentas usando o e um estilo personalizado para o IgxGridToolbarTitleComponent wrapper da nossa Grade Hierárquica.

<!--columnHiding.component.html-->
<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    ...
 </igx-hierarchical-grid>
</div>

/* columnHiding.component.css */
.photo {
    vertical-align: middle;
    max-height: 62px;
}
.cell__inner_2 {
    margin: 1px
}

A Grade Hierárquica nos fornece algumas propriedades úteis quando se trata de usar a interface do usuário de ocultação de coluna da barra de ferramentas. Ao usar a igx-grid-toolbar-hiding title propriedade, definiremos o título que é exibido dentro do botão suspenso na barra de ferramentas.

<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</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-hierarchical-grid>
</div>

Usando a columnsAreaMaxHeight propriedade do IgxGridToolbarHidingComponent, podemos definir a altura máxima da área que contém as ações da coluna. Dessa forma, se tivermos muitas ações e nem todas caberem no contêiner, aparecerá uma barra de rolagem, que nos permitirá rolar para qualquer ação que desejarmos.

// columnHiding.component.ts

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

Para usar o conjunto expandido de funcionalidades para a interface do usuário de ocultação de coluna, podemos usar a propriedade IgxColumnActionsComponent columnsAreaMaxHeight. Desta forma, podemos usá-lo de acordo com os requisitos de 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.

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 os column-actions-theme parâmetros e aceita os $title-color e . $background-color

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

Como visto, o controla column-actions-theme 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 também queremos estilizar os botões, então criaremos um novo tema de botões:

$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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

Neste exemplo, alteramos apenas a cor do texto dos botões planos e a cor desativada do botão, mas fornece button-theme muito mais parâmetros para controlar o estilo do botão.

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 criado tema de botão dentro de.igx-column-actions, para que apenas os botões de ocultação da coluna sejam estilizados. Caso contrário, outros botões na grade também seriam afetados.

Note

Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate que esse encapsulamento use::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);
    }
  }
}