Angular Seleção de grade

Com Ignite UI for Angular Grid, você pode selecionar dados facilmente usando uma variedade de eventos, API avançada ou com interações simples do mouse, como seleção única.

Angular Grid Selection Example

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

Angular Grid Selection Options

O componente IgniteUI para Angular Grid fornece três modos de seleção diferentes -Seleção de linha, Seleção de célula e Seleção de coluna. Por padrão, apenas o modo de seleção de várias células está habilitado na grade. Para alterar/ativar o modo de seleção, cellSelection você pode usar rowSelection ou selectable propriedades.

Angular Row Selection

permite rowSelection que você especifique as seguintes opções:

none - A seleção de linha seria desabilitada para a grade
single - A seleção de apenas uma linha dentro da grade estaria disponível
múltiplo - A seleção de várias linhas estaria disponível usando o Row selectors, com uma combinação de teclas como ctrl + click, ou pressionando o space key botão quando uma célula estiver focada

Vá para o tópico Seleção de linha para obter mais informações.

Angular Cell Selection

permite cellSelection que você especifique as seguintes opções:

none - A seleção de célula seria desabilitada para a Grade
single - A seleção de apenas uma célula dentro da grade estaria disponível.
multiple - Atualmente, esse é o estado padrão da seleção na Grade. A seleção de várias células está disponível arrastando o mouse sobre as células, após um clique do botão esquerdo do mouse continuamente.

Vá para o tópico Seleção de célula para obter mais informações.

Angular Column Selection

A selectable propriedade permite que você especifique as seguintes opções para cada coluna:

false - a seleção de coluna correspondente será desativada para a Grade
true - a seleção de coluna correspondente será habilitada para a Grade
Isso levou às três variações a seguir:
Seleção única -mouse click sobre a célula da coluna.
Seleção de várias colunas - segurando ctrl + mouse click sobre as células da coluna.
Seleção de coluna de intervalo - segurando shift + mouse click seleciona tudo no meio.

Acesse o tópico Seleção de coluna para obter mais informações.

Usando o evento, você pode adicionar um menu de contexto personalizado para facilitar seu trabalho com o contextMenu IgxGrid. Com um clique com o botão direito do mouse no corpo da grade, o evento emite a célula na qual é acionado. O menu de contexto funcionará com a célula emitida.

Se houver uma seleção de várias células, colocaremos lógica, que verificará se a célula selecionada está na área da seleção de várias células. Se for, também emitiremos os valores das células selecionadas.

Basicamente, a função principal ficará assim:

public rightClick(eventArgs: any) {
     // Prevent the default behavior of the right click
    eventArgs.event.preventDefault();
    this.multiCellArgs = {};
    // If we have multi-cell selection, check if selected cell is within the ranges
    if (this.multiCellSelection) {
        const node = eventArgs.cell.selectionNode;
        const isCellWithinRange = this.grid1.getSelectedRanges().some(range => {
            if (node.column >= range.columnStart &&
                node.column <= range.columnEnd &&
                node.row >= range.rowStart &&
                node.row <= range.rowEnd) {
                return true;
            }
            return false;
        })
        // If the cell is within a multi-cell selection range, bind all the selected cells data
        if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
        }
    }
    // Set the position of the context menu
    this.contextmenuX = eventArgs.event.clientX;
    this.contextmenuY = eventArgs.event.clientY;
    this.clickedCell = eventArgs.cell;
    // Enable the context menu
    this.contextmenu = true;
}

O menu de contexto terá as seguintes funções:

Copie o valor da célula selecionada
Copie o dataRow da célula selecionada
Se a célula selecionada estiver dentro de um intervalo de seleção de várias células, copie todos os dados selecionados

//contextmenu.component.ts

public copySelectedCellData(event) {
    const selectedData = { [this.cell.column.field]: this.cell.value };
    this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value }));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copyRowData(event) {
    const selectedData = this.cell.row.data ;
    this.copyData(JSON.stringify(this.cell.row.data));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copySelectedCells(event) {
    const selectedData = this.selectedCells.data;
    this.copyData(JSON.stringify(selectedData));
    this.onCellValueCopy.emit({ data: selectedData });
}

O IgxGrid buscará os dados copiados e os colará em um elemento de contêiner.

O modelo que vamos usar para combinar a grade com o menu de contexto:

<div class="wrapper">
    <div class="grid__wrapper" (window:click)="disableContextMenu()">
        <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
            (contextMenu)="rightClick($event)" (rangeSelected)="getCells($event)"
            (selected)="cellSelection($event)">
        <!-- Columns area -->
        </igx-grid>
        <div *ngIf="contextmenu==true">
            <contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell" [selectedCells]="multiCellArgs" (onCellValueCopy)="copy($event)">
            </contextmenu>
        </div>
    </div>
    <div class="selected-data-area">
        <div>
           <pre>{{copiedData}}</pre>
        </div>
    </div>
</div>

Selecione várias células e pressione o right mouse botão. O menu de contexto aparecerá e após selecionar Copy cells data os dados selecionados aparecerá na caixa vazia à direita. O resultado é:

Known Issues and Limitations

O uso da Grade com Seleção habilitada no IE11 requer a importação explícita do polyfill da matriz em polyfill.ts do aplicativo angular. O IE11 não é mais suportado a partir da versão 13.0.0.
```
import 'core-js/es7/array';
```
Quando a grade não tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitações de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
- Seleção de linha
- Expandir/recolher linha
- Edição de linha
- Fixação de linha

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.