Angular Layout de várias linhas

    Multi-row Layout extends the rendering capabilities of the igxGridComponent. The feature allows splitting a single data record into multiple visible rows.

    Angular Multi-row Layout Example

    The declaration of Multi-row Layout is achieved through igx-column-layout component. Each igx-column-layout component should be considered as a block, containing one or multiple igx-column components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more igx-column-layout blocks if the layout allows it. There should be no columns outside of those blocks and no usage of IgxColumnGroupComponent when configuring a multi-row layout. Multi-row Layout is implemented on top of the grid layout specification and should conform to its requirements.

    IgxColumnComponent exposes four @Input properties to determine the location and span of each cell:

    • colStart- índice de coluna do qual o campo começa. Essa propriedade é obrigatória.
    • rowStart- índice de linhas a partir do qual o campo começa. Essa propriedade é obrigatória.
    • colEnd - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is optional. If not set defaults to colStart + 1.
    • rowEnd - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is optional. If not set defaults to 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:

    Exemplo de Layout Multi-Linha
    Note

    rowStart and colStart properties must be set for each igx-column into igx-column-layout. The igxColumnLayout component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies.

    Feature Integration

    Due to the completely different rendering approach of Multi-row Layout, some of the column features will work only on igx-column-layout component. Such features are Column Pinning and Column Hiding. Others like - Sorting and Grouping will work in the same way - on igx-column component.

    • Filtragem - apenas o Filtro no Estilo Excel é suportado. DefinirfilterMode explicitamente comoFilterMode.quickFilter não tem efeito.
    • Paginação - funciona em registros, não em linhas visuais.
    • A opção Agrupar por -hideGroupedColumnsnão tem efeito no layout de múltiplas 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 or Arrow Right - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, Arrow Left and Arrow Right should navigate to the first cell on the left and right with the same rowStart, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same rowStart if possible.
    • 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

    The grid allows customizing the default navigation behavior when a certain key is pressed. Actions like going to the next cell or cell below could be handled easily with the powerful keyboard navigation API:

    • gridKeydown is exposed. The event will emit IGridKeydownEventArgs. This event is available only through the keyboard key combinations mentioned above, for all other key actions you can use keydown event (keydown)="onKeydown($event)"
    • navigateTo - this method allows you to navigate to a position based on provided rowindex and 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

    Sometimes when configuring a column layout it might be a challenge to calculate and set the proper colStart and colEnd or rowStart and rowEnd. Especially when there are a lot of columns in a single layout. That is why we have created a small configurator, so you can easily do that and have a similar preview of how it would look inside the igxGrid when applied. You can do the following interactions with it:

    • Defina o número de linhas para toda a configuração. Todos os layouts devem ter a mesma quantidade de linhas.
    • Add/Remove column layouts by clicking the Add Layout chip or reordering them by dragging a layout chip left/right.
    • 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.
    • Resize column cells in the layout preview so they can span more columns/rows or clear them using the Delete button.
    • Defina colunas na visualização arrastando um chip de coluna no local desejado.
    • Add/Remove new columns by using the Add Column chip.
    • Get template output of the whole configuration ready to by placed inside an igxGrid or the JSON representation that can also be used and parsed in your template using NgForOf for example.

    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

    The igxGrid allows styling through the Ignite UI for Angular Theme Library. The grid-theme exposes a wide variety of properties, which allow the customization of all the features of the grid.

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

    Importing global theme

    To begin the customization of the Multi-row Layout feature, you need to import the index file, where all styling functions and mixins are located.

    @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

    Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the feature layout as desired.

    $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 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.

    Applying the custom theme

    The easiest way to apply your theme is with a sass @include statement in the global styles file:

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

    In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index file).

    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 pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.