[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Seleção de grade

    A Tabela de Dados/Grade de Dados Ignite UI for Web Components suporta a seleção de uma ou várias linhas e células.

    Web Components Grid Selection Example

    Visão geral

    A seleção na grade de dados Web Components é habilitada em um nível de linha e célula e pode ser configurada usando a selectionMode opção da grade Web Components. Esta propriedade tem cinco opções diferentes, listadas abaixo:

    • None: a seleção não está habilitada.
    • SingleCell: A seleção de uma única célula está habilitada.
    • SingleRow: A seleção de uma única linha está habilitada.
    • MultipleCell: A seleção de múltiplas células está habilitada.
    • MultipleRow: A seleção de múltiplas linhas está habilitada.
    • RangeCell: a seleção de um intervalo de várias células clicando e arrastando está habilitada.

    selectionBehavior assume como padrão ModifierBased, onde apenas uma linha ou célula é selecionada por vez e as teclas modificadoras (CTRL) são necessárias para selecionar vários itens. selectionBehavior definido como Toggle permitirá que várias linhas ou células sejam selecionadas com apenas um clique.

    MultipleRow inclui a seguinte funcionalidade:

    • Clique e arraste para selecionar linhas
    • Pressione Shift e clique para selecionar várias linhas.
    • Pressione Shift e as teclas de seta para cima/baixo para selecionar várias linhas.

    Pressionar a barra de espaço alterna a seleção da linha ativa via MultipleRow ou SingleRow.

    Row Range Selection

    O exemplo a seguir demonstra como selecionar ou desselecionar todas as linhas na grade. Observe que selectionMode deve ser definido como MultipleRow.

    API References