Blazor Seleção de células de grade de árvore

    A seleção de células Ignite UI for Blazor na grade Blazor árvore permite recursos avançados de seleção de dados e oferece API poderosa no IgbTreeGrid componente. A Grade de Árvore Blazor suporta três modos de seleção:

    • Seleção de várias células da grade de árvore
    • Tree Grid Single Selection
    • Grade de árvore Nenhuma seleção

    Vamos nos aprofundar em cada uma dessas opções.

    Blazor Tree Grid Cell Selection Example

    O exemplo abaixo demonstra os três tipos de IgbTreeGrid 's Seleção de células comportamento. 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.

    Selection Types

    Tree Grid Multiple-Cell Selection

    Como selecionar células:

    • Ao arrastar o mouse- A seleção retangular de dados das células seria realizada.
    • Ao pressionar a tecla Ctrl + arrastar do mouse- Seleções de múltiplos intervalos seriam realizadas. Qualquer outra seleção de célula existente será persistida.
    • Seleção instantânea de várias células usando a tecla Shift. Selecione uma única célula e selecione outra célula segurando a tecla Shift. O intervalo de células entre as duas células será selecionado. Tenha em mente que se outra segunda célula for selecionada enquanto segura a tecla Shift, o intervalo de seleção de células será atualizado com base na primeira posição da célula selecionada (ponto inicial).
    • Seleção de células múltiplas do teclado usando as teclas de seta enquanto segura a tecla Shift. O intervalo de seleção de células múltiplas será criado com base na célula focada.
    • Seleção de células múltiplas do teclado usando as teclas Ctrl + ↑ ↓ ← → e Ctrl + Home / End enquanto segura a tecla Shift. O intervalo de seleção de células múltiplas será criado com base na célula em foco.
    • Clicar com a tecla esquerda do mouse enquanto segura a tecla Ctrl adicionará intervalos de células individuais à coleção de células selecionadas.
    • A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

    Demo

    Tree Grid Single Selection

    Quando você define CellSelection como single, isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modo mouse drag não funcionará e, em vez de selecionar uma célula, isso fará a seleção de texto padrão.

    Quando uma única célula é selecionada, o evento Selected é emitido, não importa se o modo de seleção é único ou múltiplo. No modo de seleção de múltiplas células, quando você seleciona um intervalo de células, o evento RangeSelected é emitido.

    Grade de árvore Nenhuma seleção

    Se você quiser desabilitar a seleção de células, você pode simplesmente definir CellSelection como none. Neste modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas o estilo de ativação é aplicado e ele será perdido quando você rolar ou clicar sobre outro elemento na página. A única maneira de você definir a seleção é usando os métodos de API descritos abaixo.

    Keyboard Navigation Interactions

    While Shift Key is Pressed

    • Shift + ↑ para adicionar a célula acima à seleção atual.
    • Shift + ↓ para adicionar a célula abaixo à seleção atual.
    • Shift + ← para adicionar a célula esquerda à seleção atual.
    • Shift + → para adicionar a célula direita à seleção atual.

    While Ctrl + Shift Keys are Pressed

    • Ctrl + Shift + ↑ para selecionar todas as células acima da célula em foco na coluna.
    • Ctrl + Shift + ↓ para selecionar todas as células abaixo da célula em foco na coluna.
    • Ctrl + Shift + ← para selecionar todas as células até o início da linha.
    • Ctrl + Shift + → para selecionar todas as células até o final da linha.
    • Ctrl + Shift + Home para selecionar todas as células, desde a célula em foco até a primeira célula na grade
    • Ctrl + Shift + End para selecionar todas as células, desde a célula em foco até a última célula da grade

    [!Note] Continuous scroll is possible only within Grid's body.

    Api Usage

    Abaixo estão os métodos que você pode usar para selecionar intervalos, limpar a seleção ou obter dados de células selecionadas.

    Select range

    SelectRange- Selecione um intervalo de células com a API. rowStart e rowEnd devem usar índices de linha e columnStart e columnEnd podem usar índice de coluna ou valor de campo de dados de coluna.

    <IgbTreeGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbTreeGrid>

@code {
    private IgbTreeGrid grid;

    private async void SetSelection()
    {        
        IgbGridSelectionRange selectionRange = new IgbGridSelectionRange();
        selectionRange.ColumnStart = 1;
        selectionRange.ColumnEnd = 1;
        selectionRange.RowStart = 2;
        selectionRange.RowEnd = 2;

        this.grid.SelectRange(new IgbGridSelectionRange[] {});
    }
}

    Clear cell selection

    ClearCellSelection limpará a seleção de células atual.

    @code {
    private async void ClearSelection()
    {
        await this.grid.ClearCellSelectionAsync();
    }
}

    Get Selected Data

    GetSelectedData retornará array dos dados selecionados no formato Dictionary. Exemplos abaixo:

    <IgbTreeGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbTreeGrid>

@code {
    private IgbTreeGrid grid;

    private async void GetSelectedData()
    {
        object[] data = await this.grid.GetSelectedDataAsync(true, true);
    }
}

    Features Integration

    A seleção de múltiplas células é baseada em índice (seleção de elementos DOM).

    • Sorting- Quando a classificação é realizada, a seleção não será apagada. Ela deixará as células selecionadas atualmente as mesmas ao classificar em ordem crescente ou decrescente.
    • Paging- Na paginação, as células selecionadas serão limpas. A seleção não será persistida entre as páginas.
    • Filtering- Quando a filtragem é realizada, a seleção não será apagada. Se a filtragem for apagada, ela retornará - as células selecionadas inicialmente.
    • Resizing- Ao redimensionar uma coluna, as células selecionadas não serão apagadas.
    • Hiding- Não limpará as células selecionadas. Se a coluna estiver oculta, as células da próxima coluna visível serão selecionadas.
    • Pinning- A célula selecionada não será limpa. O mesmo que ocultar
    • GroupBy- No agrupamento de colunas, as células selecionadas não serão desmarcadas.

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <IgbTreeGrid Class="treeGrid"></IgbTreeGrid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .treeGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.