React Grid Multi-row Layout

    The Multi-row Layout in the Ignite UI for React extends the rendering capabilities of the React Grid. The feature allows splitting a single data record into multiple visible rows.

    React Multi-row Layout Example

    The declaration of Multi-row Layout is achieved through IgrColumnLayout component. Each IgrColumnLayout 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>

    O resultado da configuração acima pode ser visto na captura de tela abaixo:

    [!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 completly 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. Othes like - 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.
    • Paginação - funciona em registros, não em linhas visuais.
    • Group By - HideGroupedColumns option has no effect in Multi-row Layout. The grouped columns are always visible.

    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

    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) or Ctrl + → (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell.

    Vertical Navigation

    • ↑ or ↓ - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell.
    • Ctrl + ↑ or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row.
    • 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] 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

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

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

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

    Em seguida, defina as propriedades CSS relacionadas a esta classe:

    .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

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.