Blazor Visão geral da seleção de colunas da grade de árvore

    O recurso Blazor Seleção de Coluna de Grade de Árvore no Ignite UI for Blazor oferece uma maneira simplificada e semelhante ao Excel de selecionar e destacar uma coluna inteira com um único clique. Ele pode ser habilitado por meio da ColumnSelection entrada. Graças à API avançada, o recurso permite fácil manipulação do estado de seleção, extração de dados das frações selecionadas, operações de análise de dados e visualizações.

    Blazor Tree Grid Column Selection Example

    O exemplo abaixo demonstra os três tipos de IgbTreeGrid 's Seleção de colunas comportamento. Use o menu suspenso de seleção de coluna abaixo para ativar cada um dos modos de seleção disponíveis.

    * Preço unitário e Descontinuado estão com seleção de coluna desativada.

    Basic Usage

    O recurso de seleção de colunas pode ser habilitado por meio da entrada ColumnSelection, que aceita valores GridSelectionMode.

    Interações

    O modo de seleção padrão é None. Se definido como Single ou Multiple, todas as colunas apresentadas serão Selectable. Dito isso, para selecionar uma coluna, precisamos apenas clicar em uma, o que a marcará como Selected. Se a coluna não for selecionável, nenhum estilo de seleção será aplicado no cabeçalho, enquanto estiver pairando.

    [!Note] The Multi Column Headers feature does not reflect on the Selectable input. The ColumnGroupComponent is Selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as Selected if all of its Selectable descendants are Selected.

    *Em Detalhes pessoais, grupo de colunas, apenas a coluna ID e o título são selecionáveis.

    Keyboard Combinations

    [!Note] The keyboard combinations are available only when the grid ColumnSelection input is set to multiple.

    Há dois cenários para navegação pelo teclado do recurso Seleção de Coluna:

    • Seleção de várias colunas - segurando CTRL + click em cada célula de cabeçalho selecionável.
    • Seleção de coluna de intervalo - segurando SHIFT + click seleciona todas as colunas selecionáveis entre elas.

    API Manipulations

    A API fornece alguns recursos adicionais quando se trata de colunas não visíveis, de modo que cada coluna oculta pode ser marcada como Selected definindo o setter correspondente.

    [!Note] The above statement also applies to the ColumnGroupComponent, except that when the Selected property is changed it changes the state of its descendants.

    Mais informações sobre as manipulações da API podem ser encontradas na seção Referências da API.

    Styling

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

    <IgbTreeGrid class="grid"></IgbTreeGrid>

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

    .grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

    Demo

    API References

    A interface de seleção de colunas tem mais algumas APIs para explorar, listadas abaixo.

    IgbTreeGrid properties:

    IgbColumn properties:

    IgbColumnGroup properties:

    IgbTreeGrid events:

    • OnColumnsSelectionChange

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.