Diseño Angular de varias filas

El diseño de varias filas amplía las capacidades de renderizado de igxGridComponent. La función permite dividir un único registro de datos en varias filas visibles.

Angular Multi-row Layout Example

La declaración de diseño de varias filas se logra mediante el componente igx-column-layout. Cada componente igx-column-layout debe considerarse como un bloque que contiene uno o varios componentes igx-column. Algunas de las funciones de la cuadrícula funcionan a nivel de bloque (esas se enumeran en la sección "Integración de funciones" a continuación). Por ejemplo, la virtualización utilizará el bloque para determinar los fragmentos virtuales, por lo que, para un mejor rendimiento, divida las columnas en más bloques igx-column-layout si el diseño lo permite. No debe haber columnas fuera de esos bloques ni se debe utilizar IgxColumnGroupComponent al configurar un diseño de varias filas. El diseño de varias filas se implementa sobre la especificación de diseño de cuadrícula y debe cumplir con sus requisitos.

IgxColumnComponent expone cuatro propiedades @Input para determinar la ubicación y el alcance de cada celda:

• colStart: índice de columna desde el que comienza el campo. Esta propiedad es obligatoria.
• rowStart: índice de fila desde el que comienza el campo. Esta propiedad es obligatoria.
• colEnd: índice de columna donde debe terminar el campo actual. La cantidad de columnas entre colStart y colEnd determinará la cantidad de columnas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en colStart + 1.
• rowEnd: índice de fila donde debe terminar el campo actual. La cantidad de filas entre RowStart y RowEnd determinará la cantidad de filas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en 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:

Note

Las propiedades rowStart y colStart se deben configurar para cada igx-column en igx-column-layout. El componente igxColumnLayout no verifica si el diseño es correcto y no arroja errores ni advertencias al respecto. Los desarrolladores deben asegurarse de que la declaración de su diseño sea correcta y completa; de lo contrario, pueden terminar en un diseño roto con desalineaciones, superposiciones e inconsistencias en el navegador.

Feature Integration

Debido al enfoque de representación completamente diferente del diseño de varias filas, algunas de las funciones de las columnas funcionarán solo en el componente igx-column-layout. Estas funciones son Fijar columnas y Ocultar columnas. Otros como: Ordenar y agrupar funcionarán de la misma manera: en el componente igx-column.

• Filtrado: solo se admite el filtrado de estilos de Excel. Establecer filterMode explícitamente en FilterMode.quickFilter no tiene ningún efecto.
• Paginación: funciona con registros, no con filas visuales.
• Agrupar por: la opción hideGroupedColumns no tiene ningún efecto en el diseño de varias filas. Las columnas agrupadas siempre están visibles.

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 nagivation

• Flecha hacia la izquierda o Flecha hacia la derecha: se mueve a la celda adyacente a la izquierda/derecha dentro de la fila actual, sin verse afectada por los diseños de columnas definidos. Si la celda actual abarca más de una fila, Flecha izquierda y Flecha derecha deberían navegar a la primera celda a la izquierda y a la derecha con la misma rowStart, a menos que haya navegado a alguna otra celda adyacente antes. La navegación almacena la celda de navegación inicial y navega a las celdas con la misma rowStart si es posible.
• 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 nagivation

• 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

La cuadrícula permite personalizar el comportamiento de navegación predeterminado cuando se presiona una determinada tecla. Acciones como going to the next cell o cell below se pueden manejar fácilmente con la poderosa API de navegación por teclado:

• gridKeydown está expuesto. El evento emitirá IGridKeydownEventArgs. Este evento está disponible solo a través de las combinaciones de teclas del teclado mencionadas anteriormente; para todas las demás acciones clave, puede usar keydown event (keydown)="onKeydown($event)"
• navigateTo: este método le permite navegar a una posición según rowindex proporcionado y 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

A veces, al configurar un diseño de columna, puede ser un desafío calcular y establecer los colStart y colEnd o rowStart y rowEnd adecuados. Especialmente cuando hay muchas columnas en un solo diseño. Es por eso que hemos creado un pequeño configurador, para que puedas hacerlo fácilmente y tener una vista previa similar de cómo se vería dentro de igxGrid cuando se aplique. Puedes realizar las siguientes interacciones con él:

• Establezca el número de filas para toda la configuración. Todos los diseños deben tener la misma cantidad de filas.
• Agregue o elimine diseños de columnas haciendo clic en el chip Add Layout o reordenándolos arrastrando un chip de diseño hacia la izquierda o hacia la derecha.
• 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.
• Cambie el tamaño de las celdas de las columnas en la vista previa del diseño para que puedan abarcar más columnas/filas o borrelas con el botón Delete.
• Establezca columnas en la vista previa arrastrando un chip de columna al lugar que desee que esté.
• Agregue o elimine nuevas columnas utilizando el chip Add Column.
• Obtenga la salida de la plantilla de toda la configuración lista para colocarla dentro de un igxGrid o la representación JSON que también se puede usar y analizar en su plantilla usando NgForOf, por ejemplo.

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

igxGrid permite diseñar a través de la Ignite UI for Angular. El tema de la grilla expone una amplia variedad de propiedades, que permiten la personalización de todas las características de la grilla.

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

Importing global theme

Para comenzar la personalización de la función Diseño de varias filas, debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.

@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

A continuación, cree un nuevo tema, que extienda el grid-theme y acepte los parámetros necesarios para personalizar el diseño de las funciones como desee.

$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
);

Defining a custom color palette

En el enfoque descrito anteriormente, los valores de color estaban codificados. Alternativamente, puede lograr una mayor flexibilidad utilizando las funciones igx-palette e igx-color.
igx-palette genera una paleta de colores basada en los colores primarios y secundarios proporcionados.

$black-color: #494949;
$yellow-color: #FFCD0F;

$custom-palette: palette(
 $primary: $black-color,
 $secondary: $yellow-color
);

Una vez generada una paleta personalizada, la función igx-color se puede utilizar para obtener diferentes variedades de colores primarios y secundarios.

$custom-theme: grid-theme(
    $cell-active-border-color: color($custom-palette, "secondary", 500),
    $cell-selected-background: color($custom-palette, "primary", 300),
    $row-hover-background: color($custom-palette, "secondary", 300),
    $row-selected-background: color($custom-palette, "primary", 100),
    $header-background: color($custom-palette, "primary", 500),
    $header-text-color:contrast-color($custom-palette, "primary", 500),
    $sorted-header-icon-color: color($custom-palette, "secondary", 500),
    $sortable-header-icon-hover-color: color($custom-palette, "secondary", 600)
);

Defining custom schemas

Puede ir aún más lejos y crear una estructura flexible que tenga todos los beneficios de un esquema. El esquema es la receta de un tema.
Amplíe uno de los dos esquemas predefinidos que se proporcionan para cada componente. En nuestro caso, usaríamos $_light_grid.

$custom-grid-schema: extend($_light-grid,(
    cell-active-border-color: (igx-color:('secondary', 500)),
    cell-selected-background: (igx-color:('primary', 300)),
    row-hover-background: (igx-color:('secondary', 300)),
    row-selected-background: (igx-color:('primary', 100)),
    header-background: (igx-color:('primary', 500)),
    header-text-color: (igx-contrast-color:('primary', 500)),
    sorted-header-icon-color: (igx-color:('secondary', 500)),
    sortable-header-icon-hover-color: (igx-color:('secondary', 600)) 
));

Para que se aplique el esquema personalizado, se deben extender los globales light u dark. En realidad, todo el proceso consiste en proporcionar un componente con un esquema personalizado y luego agregarlo al tema del componente respectivo.

$my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));
 $custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

La forma más sencilla de aplicar su tema es con una declaración @include sass en el archivo de estilos global:

@include grid($custom-theme);

Scoped component theme

Para que el tema personalizado afecte solo a un componente específico, puede mover todos los estilos que acaba de definir desde el archivo de estilos globales al archivo de estilo del componente personalizado (incluida la importación del archivo index).

De esta manera, debido a ViewEncapsulation de Angular, sus estilos se aplicarán solo a su componente personalizado.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrar esta encapsulación usando::ng-deep para poder diseñar la cuadrícula.

Note

Envuelva la declaración dentro de un selector:host para evitar que sus estilos afecten a elementos fuera de nuestro componente:

:host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

Demo

Note

La muestra no se verá afectada por el tema global seleccionado en Change Theme.

API References

• Componente IgxGrid
• Estilos de componentes IgxGrid
• Componente IgxColumnLayout
• ComponenteColumnaIgx

Additional Resources

• Descripción general de la cuadrícula
• Virtualización y rendimiento
• Paginación
• Clasificación
• Cambio de tamaño de columna
• Selección

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub