Angular Seleção de grade hierárquica

    Com Ignite UI for Angular grade hierárquica, 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 Hierárquica. 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

    IgniteUI for Angular Hierarchical Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Hierarchical Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

    Angular Row Selection

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

    • none - A seleção de linha seria desabilitada para a grade hierárquica
    • single - A seleção de apenas uma linha dentro da grade hierárquica estaria disponível
    • múltiplos - A seleção multi-linha estaria disponível usando oRow selectors, com uma combinação de teclas como ctrl + click, ou pressionando o space key quando uma célula está focada

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

    Angular Cell Selection

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

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

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

    • false - a seleção de coluna correspondente será desabilitada para a Grade Hierárquica
    • true - a seleção de coluna correspondente será habilitada para a Grade Hierárquica
    • 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 Hierárquica 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ãoprimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisiçõ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.