Diseño de varias filas React Grid

    El diseño de varias filas en la Ignite UI for React amplía las capacidades de renderizado de React Grid. La función permite dividir un único registro de datos en varias filas visibles.

    React Multi-row Layout Example

    La declaración de diseño de varias filas se logra a través IgrColumnLayout del componente. Cada IgrColumnLayout componente debe considerarse como un bloque, que contiene uno o varios IgrColumn componentes. Algunas de las características de la cuadrícula funcionan a nivel de bloque (se enumeran en la sección "Integración de características" a continuación). Por ejemplo, la virtualización usará el bloque para determinar los fragmentos virtuales, por lo tanto, para un mejor rendimiento, divida las columnas en más columnLayout bloques si el diseño lo permite. No debe haber columnas fuera de esos bloques y no debe usarse columnGroup 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.

    El componente IgrColumn expone cuatro propiedades IgrInput para determinar la ubicación y el intervalo 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.
    <IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" rowEnd="3" field="ID"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" colEnd="3" field="CompanyName"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" colEnd="2" field="ContactName"></IgrColumn>
    <IgrColumn rowStart="2" colStart="2" colEnd="3" field="ContactTitle"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" colEnd="3" field="Country"></IgrColumn>
    <IgrColumn rowStart="1" colStart="3" colEnd="5" field="Region"></IgrColumn>
    <IgrColumn rowStart="1" colStart="5" colEnd="7" field="PostalCode"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" colEnd="4" field="City"></IgrColumn>
    <IgrColumn rowStart="2" colStart="4" colEnd="7" field="Address"></IgrColumn>
</IgrColumnLayout>
<IgrColumnLayout>
    <IgrColumn rowStart="1" colStart="1" field="Phone"></IgrColumn>
    <IgrColumn rowStart="2" colStart="1" field="Fax"></IgrColumn>
</IgrColumnLayout>

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

    [!Note] RowStart and ColStart properties must be set for each IgrColumn into a columnLayout. The columnLayout 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

    Debido al enfoque de representación completamente diferente del diseño de varias filas, algunas de las características de columna solo funcionarán en columnLayout el componente. Estas características son la fijación de columnas y la ocultación de columnas. Por ejemplo, la clasificación y la agrupación funcionarán de la misma manera en el IgrColumn componente.

    • 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.
    • La opción Agrupar por: 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

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

    Horizontal Navigation

    • ← o →: 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, ← y → deben 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 + ← (INICIO) o Ctrl + → (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

    • ↑ o ↓: 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 + ↑ 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] Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows.

    [!Note] Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell.

    Custom Keyboard Navigation

    La cuadrícula permite personalizar el comportamiento de navegación predeterminado cuando se presiona una determinada tecla. Acciones como ir a la siguiente celda o a la siguiente celda 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 el evento KeyDown.
    • NavigateTo: este método le permite navegar a una posición según RowIndex y VisibleColumnIndex proporcionados.

    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

    Styling

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <IgrGrid className="grid"></IgrGrid>

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}

    Demo

    API References

    Additional Resources

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