Web Components Seleção de células de grade de árvore

    A seleção de células Ignite UI for Web Components na grade Web Components árvore permite recursos avançados de seleção de dados e oferece API poderosa no IgcTreeGridComponent componente. A Grade de Árvore Web Components 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.

    Web Components Tree Grid Cell Selection Example

    O exemplo abaixo demonstra os três tipos de IgcTreeGridComponent '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.
    • By CTRL key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
    • Instant multi-cell selection by using SHIFT key. Select single cell and select another single cell by holding the SHIFT key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding SHIFT key the cell selection range will be updated based on the first selected cell position (starting point).
    • Keyboard multi-cell selection by using the Arrow keys while holding SHIFT key. Multi-cell selection range will be created based on the focused cell.
    • Keyboard multi-cell selection by using the CTRL + ↑ ↓ ← → keys and CTRL + HOME/END while holding SHIFT key. Multi-cell selection range will be created based on the focused cell.
    • Clicking with the Left Mouse key while holding CTRL key will add single cell ranges into the selected cells collection.
    • 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 como CellSelection​ ​único, isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modo arrastar o mouse 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 selected, o evento é emitido, não importa se o modo de seleção é único ou múltiplo. No modo de seleção de várias células, quando você seleciona um intervalo de células RangeSelected, o evento é emitido.

    Grade de árvore Nenhuma seleção

    Se você deseja desativar a seleção de células, basta definir CellSelection como nenhum. 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 será perdido quando você rolar ou clicar em outro elemento da página. A única maneira de definir a seleção é usando os métodos de API descritos abaixo.

    Keyboard Navigation Interactions

    While Shift Key is Pressed

    • SHIFT + ↑ to add above cell to the current selection.
    • SHIFT + ↓ to add below cell to the current selection.
    • SHIFT + ← to add left cell to the current selection.
    • SHIFT + → to add right cell to the current selection.

    While Ctrl + Shift Keys are Pressed

    • CTRL + SHIFT + ↑ to select all cells above the focused cell in the column.
    • CTRL + SHIFT + ↓ to select all cells below the focused cell in the column.
    • CTRL + SHIFT + ← to select all cells till the start of the row.
    • CTRL + SHIFT + → to select all cells till the end of the row.
    • CTRL + SHIFT + HOME to select all cells from the focused cell till the first-most cell in the grid
    • CTRL + SHIFT + END to select all cells from the focused cell till the last-most cell in the grid

    [!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 o índice da coluna ou o valor do campo de dados da coluna.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid.selectRange(range);

    Clear cell selection

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

    this.grid.clearCellSelection();

    Get Selected Data

    getSelectedData retornará a matriz dos dados selecionados no formato, dependendo da seleção. Exemplos abaixo:

    • Se três células individuais diferentes forem selecionadas:
    expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
    • Se três células de uma coluna forem selecionadas:
    expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
    • Se três células forem selecionadas com o arrastar do mouse de uma linha e três colunas:
    expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
    • Se três células forem selecionadas com o mouse arrastando de duas linhas e três colunas:
    expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
    • Se dois intervalos diferentes forem selecionados:
    expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
    • Se dois intervalos sobrepostos forem selecionados, o formato será:
    expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

    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á apagada. O mesmo que esconder
    • 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:

    <igc-tree-grid class="treeGrid"></igc-tree-grid>

    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.