Layout de várias linhas da grade React

    O Layout de várias linhas no Ignite UI for React estende os recursos de renderização da grade React. O recurso permite dividir um único registro de dados em várias linhas visíveis.

    React Multi-row Layout Example

    A declaração do layout multi-fileira é alcançada por meiocolumnLayout de componentes. CadacolumnLayout componente deve ser considerado como um bloco, contendo um ou váriosIgrColumn componentes. Algumas das funcionalidades da grade funcionam em nível de bloco (essas estão listadas na seção "Integração de Funcionalidades" abaixo). Por exemplo, a virtualização usará o bloco para determinar os blocos virtuais, então, para melhor desempenho, divida as colunas em maiscolumnLayout blocos se o layout permitir. Não deve haver colunas fora desses blocos e não deve ser usadocolumnGroup ao configurar um layout de várias linhas. O layout multi-fileira é implementado sobre a especificação de layout em grade e deve estar em conformidade com seus requisitos.

    OIgrColumn componente expõe quatroIgrInput propriedades para determinar a localização e o alcance de cada célula:

    • colStart- índice de coluna do qual o campo começa. Essa propriedade é obrigatória.
    • rowStart- índice de linhas a partir do qual o campo começa. Essa propriedade é obrigatória.
    • colEnd- índice de coluna onde o campo atual deve terminar. A quantidade de colunas entre colStart e colEnd determinará a quantidade de colunas que abrangem aquele campo. Essa propriedade é opcional. Se não, defina como padrão colStart + 1.
    • rowEnd- índice de linhas onde o campo atual deve terminar. A quantidade de linhas entre rowStart e rowEnd determinará a quantidade de linhas que abrangem aquele campo. Essa propriedade é opcional. Se não, definir como padrão 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:

    Disposição de várias fileiras

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

    Devido à abordagem de renderização completamente diferente do layout Multi-row, alguns recursos das colunas funcionam apenas emcolumnLayout componentes. Essas características são Fixação de Colunas e Ocultação de Colunas. Caso contrário, ordenar e agrupar funcionarão da mesma forma - noIgrColumn componente.

    • Filtragem - apenas o Filtro no Estilo Excel é suportado. DefinirFilterMode explicitamente comoFilterMode.quickFilter não tem efeito.
    • Paginação - funciona em registros, não em linhas visuais.
    • A opção Agrupar por -HideGroupedColumnsnão tem efeito no layout de múltiplas linhas. As colunas agrupadas estão sempre visíveis.

    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

    IgrGridcom Disposições Multi-Fileira, oferece navegação por teclado integrada.

    Horizontal Navigation

    • ← ou →- mover-se para a célula adjacente à esquerda/direita dentro da linha atual, sem ser afetado pelos layouts das colunas definidos. Se a célula atual ocupa mais de uma linha ← e → deve navegar para a primeira célula à esquerda e à direita com a mesmarowStart, a menos que você já tenha navegado para outra célula adjacente antes. A navegação armazena a célula inicial de navegação e navega até as células com a mesmarowStart célula, se possível.
    • CTRL + ← (HOME) ou CTRL + → (END) - navegue até o início ou o fim da linha e selecione a célula de acordo com a célula de navegação inicial.

    Vertical Navigation

    • ↑ ou ↓- mova-se para a célula acima/abaixo em relação a uma posição inicial e não seja afetada pelas linhas. Se a célula atual se estender por mais de uma coluna, a próxima célula ativa será selecionada de acordo com a célula de navegação inicial.
    • CTRL + ↑ ou CTRL + Down- Navegue e aplique o foco na mesma coluna na primeira ou na última linha.
    • 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

    A grade permite personalizar o comportamento de navegação padrão quando uma determinada tecla é pressionada. Ações como ir para a próxima célula ou célula abaixo podem ser tratadas facilmente com a poderosa API de navegação do teclado:

    • GridKeydowné exposto. O evento vai emitirIGridKeydownEventArgs. Este evento está disponível apenas através das combinações de teclas do teclado mencionadas acima; para todas as outras ações de teclas você pode usarKeyDown o evento.
    • NavigateTo- esse método permite navegar até uma posição baseada em fornecidaRowIndex eVisibleColumnIndex

    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.