Angular Diseño de varias filas

    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 - column index from which the field is starting. This property is mandatory.
    • rowStart - row index from which the field is starting. This property is mandatory.
    • 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>

    El resultado de la configuración anterior se puede ver en la siguiente captura de pantalla:

    Ejemplo de disposición de varias filas
    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.

    • Filtering - only Excel Style Filtering is supported. Setting filterMode explicitly to FilterMode.quickFilter has no effect.
    • Paginación: funciona con registros, no con filas visuales.
    • Group By - hideGroupedColumns option has no effect in Multi-row Layout. The grouped columns are always visible.

    Actualmente no se admiten las siguientes funciones:

    • Columna en movimiento
    • Encabezados de varias columnas
    • Exportar a Excel
    • resúmenes

    Keyboard Navigation

    IgxGridComponent con diseños de varias filas proporciona navegación con teclado integrado.

    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 + Flecha izquierda (INICIO) o Ctrl + Flecha derecha (FIN): navegue hasta el inicio o el final de la fila y seleccione la celda de acuerdo con la celda de navegación inicial.

    Vertical navigation

    • Flecha hacia arriba o Flecha hacia abajo: se mueve a la celda de arriba/abajo en relación con una posición inicial y no se ve afectado por las filas. Si la celda actual abarca más de una columna, se seleccionará la siguiente celda activa de acuerdo con la celda de navegación inicial.
    • Ctrl + Flecha arriba o Ctrl + Abajo: navega y aplica el foco en la misma columna en la primera o en la última fila.
    • Ctrl + Inicio o Ctrl + Fin: navega a la primera fila y enfoca la primera celda o navega a la última fila y enfoca la última celda.
    Note

    La navegación a través de celdas que abarcan varias filas o columnas se realiza de acuerdo con la celda de navegación inicial y permitirá regresar a la celda inicial usando la tecla para la dirección opuesta. Se utiliza el mismo enfoque al navegar a través de filas de grupos.

    Note

    La selección y la selección de varias celdas funcionan en el diseño, lo que significa que cuando una celda está activa, se seleccionará su diseño. Además, todas las funciones de selección múltiple, como la selección por arrastre, son aplicables y funcionarán por diseño, no por celda.

    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

    La siguiente demostración agrega navegación adicional hacia abajo/arriba mediante las teclas Enter y Shift + Enter, similar al comportamiento observado en 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:

    • Establezca el número de filas para toda la configuración. Todos los diseños deben tener la misma cantidad de filas.
    • Add/Remove column layouts by clicking the Add Layout chip or reordering them by dragging a layout chip left/right.
    • Establezca configuraciones específicas para cada diseño como número de columnas y su ancho. La configuración se refiere al diseño seleccionado actualmente.
    • Resize column cells in the layout preview so they can span more columns/rows or clear them using the Delete button.
    • Establezca columnas en la vista previa arrastrando un chip de columna al lugar que desee que esté.
    • 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.

    De forma predeterminada, hemos configurado las mismas columnas que en nuestro ejemplo anterior, pero se pueden borrar y configurar para que coincidan con la configuración deseada.

    Estilismo

    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.

    En los pasos siguientes, veremos los pasos para personalizar el estilo de diseño de varias filas de la cuadrícula.

    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

    Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

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

    De esta manera, debido a Angular ViewEncapsulation, los estilos solo se aplicarán al componente personalizado.

    Demo

    Note

    The sample will not be affected by the selected global theme from Change Theme.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.