Angular Layout de várias linhas

    O layout de várias linhas estende os recursos de renderização do igxGridComponent. O recurso permite dividir um único registro de dados em várias linhas visíveis.

    Angular Multi-row Layout Example

    A declaração de Layout de várias linhas é obtida por meio igx-column-layout do componente. Cada igx-column-layout componente deve ser considerado como um bloco, contendo um ou vários igx-column componentes. Alguns dos recursos da grade funcionam no nível do bloco (eles estão listados na seção "Integração de recursos" abaixo). Por exemplo, a virtualização usará o bloco para determinar as partes virtuais, portanto, para melhor desempenho, divida as colunas em mais igx-column-layout blocos, se o layout permitir. Não deve haver colunas fora desses blocos e nenhum uso de IgxColumnGroupComponent ao configurar um layout de várias linhas. O layout de várias linhas é implementado sobre a especificação do layout da grade e deve estar em conformidade com seus requisitos.

    IgxColumnComponent Expõe quatro @Input propriedades para determinar a localização e a extensão de cada célula:

    • colStart- índice da coluna a partir do qual o campo está começando. Esta propriedade é obrigatória.
    • rowStart- índice da linha a partir do qual o campo está começando. Esta propriedade é obrigatória.
    • colEnd- índice da coluna onde o campo atual deve terminar. A quantidade de colunas entre colStart e colEnd determinará a quantidade de colunas de abrangência para esse campo. Essa propriedade é opcional. Se não for definido, o padrão para colStart + 1.
    • rowEnd- índice da linha onde o campo atual deve terminar. A quantidade de linhas entre rowStart e rowEnd determinará a quantidade de linhas de abrangência para esse campo. Essa propriedade é opcional. Se não for definido, o padrão para rowStart + 1.
    <igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [rowEnd]="3" field="ID"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="2" field="ContactName"></igx-column>
	<igx-column [rowStart]="2" [colStart]="2" [colEnd]="3" field="ContactTitle"></igx-column>
</igx-column-layout>
<igx-column-layout>
	<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" field="Country"></igx-column>
	<igx-column [rowStart]="1" [colStart]="3" [colEnd]="5" field="Region"></igx-column>
	<igx-column [rowStart]="1" [colStart]="5" [colEnd]="7" field="PostalCode"></igx-column>
	<igx-column [rowStart]="2" [colStart]="1" [colEnd]="4" field="City"></igx-column>
	<igx-column [rowStart]="2" [colStart]="4" [colEnd]="7" field="Address"></igx-column>
</igx-column-layout>
<igx-column-layout>
    <igx-column [rowStart]="1" [colStart]="1" field="Phone"></igx-column>
    <igx-column [rowStart]="2" [colStart]="1" field="Fax"></igx-column>
</igx-column-layout>

    O resultado da configuração acima pode ser visto na captura de tela abaixo:

    Note

    rowStart e colStart as propriedades devem ser definidas para cada igx-column into igx-column-layout. O igxColumnLayout componente não está verificando se o layout está correto e não está lançando erros ou avisos sobre isso. Os desenvolvedores devem certificar-se de que a declaração de seu layout esteja correta e completa, caso contrário, eles podem acabar em layout quebrado com desalinhamentos, sobreposições e inconsistências do navegador.

    Feature Integration

    Devido à abordagem de renderização completamente diferente do Layout de várias linhas, alguns dos recursos de coluna funcionarão apenas no igx-column-layout componente. Esses recursos são Fixação de Coluna e Ocultação de Coluna. Outros como - Ordenação e agrupamento funcionarão da mesma maneira - no igx-column componente.

    • Filtragem - somente a Filtragem de Estilo do Excel é suportada. Definir filterMode explicitamente como FilterMode.quickFilter não tem efeito.
    • Paginação - funciona em registros, não em linhas visuais.
    • A opção Agrupar por hideGroupedColumns não tem efeito no Layout de várias linhas. As colunas agrupadas estão sempre visíveis.

    No momento, não há suporte para os seguintes recursos:

    • Movimentação de Colunas
    • Cabeçalhos de várias colunas
    • Exportar para Excel
    • Resumos

    Keyboard Navigation

    IgxGridComponent com layouts de várias linhas fornece navegação de teclado integrada.

    Horizontal navigation

    • Arrow Left Ou Arrow Right- Mova para a célula adjacente à esquerda/direita dentro da linha atual não afetada pelos layouts de coluna definidos. Se a célula atual se estende por mais de uma linha Arrow Left e Arrow Right deve navegar para a primeira célula à esquerda e à direita com o mesmo rowStart, a menos que você tenha navegado para alguma outra célula adjacente antes. A navegação armazena a célula de navegação inicial e navega para as células com a mesma rowStart, se possível.
    • Ctrl + Arrow Left (HOME) ou Ctrl + Arrow Right (END) - navegue até o início ou o fim da linha e selecione a célula de acordo com a célula de navegação inicial.

    Vertical navigation

    • Arrow Up ou Arrow Down- mova-se para a célula acima/abaixo em relação a uma posição inicial e não seja afetada pelas linhas. Se a célula atual se estender por mais de uma coluna, a próxima célula ativa será selecionada de acordo com a célula de navegação inicial.
    • Ctrl + Seta para cima ou Ctrl + Down- Navegue e aplique o foco na mesma coluna na primeira ou na última linha.
    • Ctrl + Home ou Ctrl + End- Navegue até a primeira linha e foque a primeira célula ou navegue até a última linha e foque a última célula.
    Note

    A navegação pelas células que se estendem por várias linhas ou colunas é feita de acordo com a célula de navegação inicial e permitirá retornar à célula inicial usando a chave na direção oposta. A mesma abordagem é usada ao navegar pelas linhas do grupo.

    Note

    A seleção e a seleção de várias células estão funcionando no layout, o que significa que quando uma célula estiver ativa, seu layout será selecionado. Além disso, todos os recursos de seleção múltipla, como seleção de arrasto, são aplicáveis e funcionarão por layout, não por célula.

    Custom Keyboard Navigation

    A grade permite personalizar o comportamento de navegação padrão quando uma determinada tecla é pressionada. Ações como going to the next cell ou cell below podem ser tratadas facilmente com a poderosa API de navegação por teclado:

    • gridKeydown está exposto. O evento será emitido IGridKeydownEventArgs. Este evento está disponível apenas através das combinações de teclas do teclado mencionadas acima, para todas as outras ações de tecla que você pode usar keydown evento (keydown)="onKeydown($event)"
    • navigateTo- Este método permite que você navegue para uma posição com base no fornecido rowindex e visibleColumnIndex

    A demonstração abaixo adiciona navegação adicional para baixo/para cima por meio das Enter teclas e Shift + Enter, semelhante ao comportamento observado no Excel.

    Demo

    Layout Configurator

    Às vezes, ao configurar um layout de coluna, pode ser um desafio calcular e definir o colStart e colEnd ou rowStart e rowEnd. Especialmente quando há muitas colunas em um único layout. É por isso que criamos um pequeno configurador, para que você possa fazer isso facilmente e ter uma visualização semelhante de como ficaria dentro do igxGrid quando aplicado. Você pode fazer as seguintes interações com ele:

    • Defina o número de linhas para toda a configuração. Todos os layouts devem ter a mesma quantidade de linhas.
    • Adicione/remova layouts de coluna clicando no chip ou reordenando-os arrastando um chip de layout para a Add Layout esquerda/direita.
    • Defina configurações específicas para cada layout como número de colunas e a largura delas. A configuração refere-se ao layout selecionado no momento.
    • Redimensione as células da coluna na visualização do layout para que elas possam abranger mais colunas/linhas ou limpá-las usando o Delete botão.
    • Defina colunas na visualização arrastando um chip de coluna no local desejado.
    • Adicionar/remover novas colunas usando o Add Column chip.
    • Obtenha a saída do modelo de toda a configuração pronta para ser colocada dentro de um igxGrid ou da representação JSON que também pode ser usada e analisada em seu modelo usando NgForOf, por exemplo.

    Por padrão, definimos as mesmas colunas que nosso exemplo anterior, mas ele pode ser limpo e configurado para corresponder à configuração desejada.

    Estilização

    O igxGrid permite estilizar através do Ignite UI for Angular Theme Library. O grid-theme expõe uma grande variedade de propriedades, que permitem a personalização de todos os recursos da grade.

    Nas etapas abaixo, estamos passando pelas etapas de personalização do estilo de layout de várias linhas da grade.

    Importing global theme

    Para iniciar a personalização do recurso Layout de várias linhas, você precisa importar o index arquivo, onde todas as funções de estilo e mixins estão localizados.

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

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

    Defining custom theme

    Em seguida, crie um novo tema, que estenda o grid-theme e aceite os parâmetros, necessários para personalizar o layout do recurso conforme desejado.

    $custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #fde069,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $sorted-header-icon-color: #ffcd0f,
  $sortable-header-icon-hover-color: #e9bd0d
);
    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.

    Applying the custom theme

    A maneira mais fácil de aplicar seu tema é com uma sass @include instrução no arquivo de estilos globais:

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

    Para que o tema personalizado afete apenas um componente específico, você pode mover todos os estilos que acabou de definir do arquivo de estilos globais para o arquivo de estilo do componente personalizado (incluindo a index importação do arquivo).

    Dessa forma, devido ao ViewEncapsulation do Angular, seus estilos serão aplicados somente ao seu componente personalizado.

    Demo

    Note

    A amostra não será afetada Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.