Blazor Grid Multi-row Layout

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

    Blazor Multi-row Layout Example

    A declaração de Layout de várias linhas é obtida por meio IgbColumnLayout do componente. Cada IgbColumnLayout componente deve ser considerado como um bloco, contendo um ou vários IgbColumn componentes. Alguns dos recursos da grade funcionam no nível do bloco (eles estão listados na seção "Integração de recursos" abaixo). Por exemplo, a virtualização usará o bloco para determinar as partes virtuais, portanto, para melhor desempenho, divida as colunas em mais IgbColumnLayout blocos, se o layout permitir. Não deve haver colunas fora desses blocos e nenhum uso de IgbColumnGroup ao configurar um layout de várias linhas. O layout de várias linhas é implementado sobre a especificação do layout da grade e deve estar em conformidade com seus requisitos.

    O IgbColumn componente expõe quatro IgbInput propriedades para determinar a localização e a extensão de cada célula:

    • ColStart- índice da coluna a partir do qual o campo está começando. Esta propriedade é obrigatória.
    • RowStart- índice da linha a partir do qual o campo está começando. Esta propriedade é obrigatória.
    • ColEnd- índice da coluna onde o campo atual deve terminar. A quantidade de colunas entre colStart e colEnd determinará a quantidade de colunas de abrangência para esse campo. Essa propriedade é opcional. Caso contrário, o padrão é colStart + 1.
    • RowEnd- índice da linha onde o campo atual deve terminar. A quantidade de linhas entre rowStart e rowEnd determinará a quantidade de linhas de abrangência para esse campo. Essa propriedade é opcional. Caso contrário, o padrão será rowStart + 1.
    <IgbColumnLayout>
    <IgbColumn RowStart="1" RowEnd="3" ColStart="1" Field="ID"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="CompanyName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="2" Field="ContactName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="2" ColEnd="3" Field="ContactTitle"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="Country"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="3" ColEnd="5" Field="Region"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="5" ColEnd="7" Field="PostalCode"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="4" Field="City"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="4" ColEnd="7" Field="Address"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" Field="Phone"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" Field="Fax"></IgbColumn>
</IgbColumnLayout>

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

    [!Note] RowStart and ColStart properties must be set for each IgbColumn into a IgbColumnLayout. The IgbColumnLayout 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 de várias linhas, alguns dos recursos de coluna funcionarão apenas no IgbColumnLayout componente. Esses recursos são Fixação de Coluna e Ocultação de Coluna. Outros como - Classificação e Agrupamento funcionarão da mesma maneira - no IgbColumn componente.

    • Filtragem - somente a Filtragem de Estilo do Excel é suportada. Definir FilterMode explicitamente como FilterMode.quickFilter não tem efeito.
    • Paginação - funciona em registros, não em linhas visuais.
    • A opção Agrupar por HideGroupedColumns não tem efeito no Layout de várias 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

    IgbGrid com layouts de várias linhas fornece navegação de teclado integrada.

    Horizontal Navigation

    • ← Ou →- Mova para a célula adjacente à esquerda/direita dentro da linha atual não afetada pelos layouts de coluna definidos. Se a célula atual se estende por mais de uma linha ← e → deve navegar para a primeira célula à esquerda e à direita com o mesmo rowStart, a menos que você tenha navegado para alguma outra célula adjacente antes. A navegação armazena a célula de navegação inicial e navega para as células com a mesma rowStart, 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 está exposto. O evento será emitido IGridKeydownEventArgs. Este evento está disponível apenas através das combinações de teclas do teclado mencionadas acima, para todas as outras ações de tecla você pode usar KeyDown o evento.
    • NavigateTo- Este método permite que você navegue para uma posição com base no fornecido RowIndex e 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:

    <IgbGrid class="grid"></IgbGrid>

    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.