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

    The Ignite UI for Web Components Cell Selection in Web Components Tree Grid enables rich data select capabilities and offers powerful API in the IgcTreeGridComponent component. The Web Components Tree Grid supports three selection modes:

    • 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

    The sample below demonstrates the three types of IgcTreeGridComponent's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.

    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 CTRL pressionar a tecla + arrastar o mouse, várias seleções de alcance seriam executadas. Qualquer outra seleção de célula existente será mantida.
    • Seleção instantânea de várias células usando a SHIFT tecla. Selecione uma única célula e selecione outra célula única segurando a SHIFT tecla. O intervalo de células entre as duas células será selecionado. Lembre-se de que, se outra segunda célula for selecionada enquanto mantém pressionada SHIFT a tecla, o intervalo de seleção da célula será atualizado com base na primeira posição da célula selecionada (ponto inicial).
    • Seleção de várias células do teclado usando as teclas enquanto mantém pressionada Arrow​ ​SHIFT a tecla. O intervalo de seleção de várias células será criado com base na célula focada.
    • Seleção de várias células do teclado usando as teclas + ↑​ ​← ↓ → e CTRL + HOME / END enquanto mantém pressionada CTRL​ ​SHIFT a tecla. O intervalo de seleção de várias células será criado com base na célula focada.
    • Clicar com a tecla esquerda do mouse enquanto mantém pressionada CTRL a tecla adicionará intervalos de células únicas à 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

    When you set the CellSelection to single, this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.

    When single cell is selected selected event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cells RangeSelected event is emitted.

    Grade de árvore Nenhuma seleção

    If you want to disable cell selection you can just set CellSelection to none. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.

    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 focalizada na coluna.
    • CTRL + SHIFT + ↓ para selecionar todas as células abaixo da célula focalizada 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 da célula focalizada até a primeira célula mais alta na grade
    • CTRL​ ​END + SHIFT +para selecionar todas as células da célula focalizada 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 - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

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

    Clear cell selection

    ClearCellSelection will clear the current cell selection.

    this.grid.clearCellSelection();

    Get Selected Data

    getSelectedData will return array of the selected data in format depending on the selection. Examples below:

    • 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 - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
    • Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
    • Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
    • Resizing - On column resizing selected cells will not be cleared.
    • Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
    • Pinning - Selected cell will not be cleared. Same as hiding
    • GroupBy - On column grouping selected cells will not be cleared.

    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.