React Visão geral da seleção de coluna de grade hierárquica

    O recurso React Seleção de Colunas em Grade Hierárquica em Ignite UI for React oferece uma forma simplificada e semelhante ao Excel de selecionar e destacar uma coluna inteira com um único clique. Ele pode ser ativado através dacolumnSelection entrada. Graças à API avançada, o recurso permite a manipulação fácil do estado de seleção, extração de dados das frações selecionadas, operações de análise de dados e visualizações.

    React Hierarchical Grid Column Selection Example

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

    * Foto e Estreia estão com seleção de coluna desativada.

    Basic Usage

    A função de seleção de colunas pode ser ativada através dacolumnSelection entrada, que assumeGridSelectionMode valores.

    Interações

    O modo de seleção padrão éNone. Se definido comoSingle ouMultiple, todas as colunas apresentadas estarãoselectable. Dito isso, para selecionar uma coluna, basta clicar em uma, que a marcará comoselected. Se a coluna não for selecionável, nenhum estilo de seleção será aplicado no cabeçalho, enquanto estiver flutuando.

    [!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 Localização, grupo de colunas, apenas a coluna Cidade é selecionável.

    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 oferece algumas capacidades adicionais quando se trata das colunas invisíveis, de modo que toda coluna oculta pode ser marcada comoselected 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 podia ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso queira mudar algumas cores, precisa definir aclass para a grade primeiro:

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

    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.

    IgrHierarchicalGrid properties:

    IgrColumn properties:

    columnGroup properties:

    IgrHierarchicalGrid events:

    • OnColumnsSelectionChange

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.