React Visão geral da seleção de grade de árvore

    Com o recurso Ignite UI for React Select em React Tree Grid, você pode interagir e manipular dados facilmente usando interações simples do mouse. Existem três modos de seleção disponíveis:

    • Seleção de linha
    • Seleção de células
    • Column selection

    Com a rowSelection propriedade, você pode especificar:

    • Nenhum
    • Solteiro
    • Seleção múltipla

    React Tree Grid Selection Example

    O exemplo abaixo demonstra três tipos de comportamentos de seleção de células no IgrTreeGrid. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis.

    React Tree Grid Selection Options

    React Tree Grid Row Selection

    permite rowSelection que você especifique as seguintes opções:

    • None- A seleção de linha seria desativada para o IgrTreeGrid.
    • Single- A seleção de apenas uma linha dentro do IgrTreeGrid estaria disponível.
    • Multiple- A seleção de várias linhas estaria disponível usando os seletores de linha, com uma combinação de teclas como ctrl + clique, ou pressionando a tecla de espaço quando uma célula estiver em foco.
    • MultipleCascade- Este é um modo de seleção em cascata, resultando na seleção de todos os filhos na árvore abaixo do registro que o usuário seleciona com a interação do usuário. Nesse modo, o estado de seleção de um pai depende inteiramente do estado de seleção de seus filhos.

    Vá para o tópico Seleção de linha para obter mais informações.

    React Tree Grid Cell Selection

    permite cellSelection que você especifique as seguintes opções:

    • None- A seleção de células seria desativada para o IgrTreeGrid.
    • Single- A seleção de apenas uma célula dentro do IgrTreeGrid estaria disponível.
    • Multiple- Atualmente, este é o estado padrão da seleção no IgrTreeGrid. A seleção de várias células está disponível arrastando o mouse sobre as células, após um clique do botão esquerdo do mouse continuamente.

    Vá para o tópico Seleção de célula para obter mais informações.

    React Tree Grid Column Selection

    A selectable propriedade permite que você especifique as opções a seguir para cada um IgrColumn. A seleção de coluna correspondente será habilitada ou desabilitada se essa propriedade for definida como true ou false, respectivamente.

    Isso leva às três variações seguintes:

    • Seleção única -mouse click sobre a célula da coluna.
    • Seleção de várias colunas - segurando ctrl + mouse click sobre as células da coluna.
    • Seleção de coluna de intervalo - segurando shift + mouse click seleciona tudo no meio.

    Acesse o tópico Seleção de coluna para obter mais informações.

    Known Issues and Limitations

    Quando a grade não tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitações de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:

    • Seleção de linha
    • Expandir/recolher linha
    • Edição de linha
    • Fixação de linha

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.