Angular Tree Grid Selection

    Com Ignite UI for Angular Tree Grid, você pode selecionar dados facilmente usando uma variedade de eventos, API avançada ou com interações simples do mouse, como seleção única.

    Angular Grid Selection Example

    O exemplo abaixo demonstra os três tipos de comportamento de seleção de células da Grade de Árvore. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação do botão por meio de uma caixa de mensagem de lanchonete.

    Angular Grid Selection Options

    O componente IgniteUI para Angular Grade de Árvore fornece três modos de seleção diferentes -Seleção de linha, Seleção de célula e Seleção de coluna. Por padrão, apenas o modo de seleção de várias células está habilitado na grade de árvore. Para alterar/ativar o modo de seleção, cellSelection você pode usar rowSelection ou selectable propriedades.

    Angular Row Selection

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

    • none - A seleção de linha seria desabilitada para a grade de árvore
    • single - A seleção de apenas uma linha dentro da grade de árvore estaria disponível
    • múltiplo - A seleção de várias linhas estaria disponível usando o Row selectors, com uma combinação de teclas como ctrl + click, ou pressionando o space key botão quando uma célula estiver focada
    • 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.

    Angular Cell Selection

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

    • none - A seleção de célula seria desabilitada para a Grade de Árvore
    • single - A seleção de apenas uma célula dentro da grade da árvore estaria disponível.
    • multiple - Atualmente, este é o estado padrão da seleção na Grade de árvore. 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.

    Angular Column Selection

    A selectable propriedade permite que você especifique as seguintes opções para cada coluna:

    • false - a seleção de coluna correspondente será desativada para a Grade de Árvore
    • true - a seleção de coluna correspondente será habilitada para a Grade de Árvore
    • Isso levou às três variações a seguir:
    • 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

    • O uso da Grade de Árvore com a Seleção habilitada no IE11 requer a importação explícita do polyfill da matriz em polyfill.ts do aplicativo angular. O IE11 não é mais suportado a partir da versão 13.0.0.

      import 'core-js/es7/array';

    • 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.