React Diseño de cuadrícula de varias filas

    El diseño de varias filas del Ignite UI for React amplía las capacidades de representación de la cuadrícula React. La función permite dividir un solo registro de datos en varias filas visibles.

    React Multi-row Layout Example

    The declaration of Multi-row Layout is achieved through columnLayout component. Each columnLayout component should be considered as a block, containing one or multiple IgrColumn 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 columnLayout blocks if the layout allows it. There should be no columns outside of those blocks and no usage of columnGroup when configuring a multi-row layout. Multi-row Layout is implemented on top of the grid layout specification and should conform to its requirements.

    The IgrColumn component exposes four IgrInput 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.
    <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:

    multi-row-layout

    [!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

    Due to the completely different rendering approach of Multi-row Layout, some of the column features will work only on columnLayout component. Such features are Column Pinning and Column Hiding. Otherwise - Sorting and Grouping will work in the same way - on the IgrColumn 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

    IgrGrid with Multi-Row Layouts provides build-in keyboard navigation.

    Horizontal Navigation

    • ← or → - 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, ← and → 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 + ← (HOME) o CTRL + → (END) - 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 + Down- Navegue y aplique el foco en la misma columna en la primera o en la última fila.
    • CTRL + HOME o CTRL + END- 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 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.
    • 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 a través de las ENTER teclas 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.