[!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 Grid Selection

    The Ignite UI for Web Components Data Table / Data Grid supports single or multiple row and cell selection.

    Web Components Grid Selection Example

    Visão geral

    Selection in the Web Components data grid is enabled on a row and cell level and can be configured by using the selectionMode option of the Web Components grid. This property takes five different options, listed below:

    • 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