Angular Selección de cuadrícula

Con Ignite UI for Angular Grid, puede seleccionar datos fácilmente mediante el uso de una variedad de eventos, una API enriquecida o con interacciones simples del mouse como la selección única.

Angular Grid Selection Example

El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de celdas de Grid. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción de botón a través de un cuadro de mensaje de snackbar.

Angular Grid Selection Options

IgniteUI for Angular Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

Angular Row Selection

Property rowSelection enables you to specify the following options:

ninguno: la selección de filas estaría deshabilitada para la cuadrícula
single: la selección de solo una fila dentro de la cuadrícula estaría disponible
multiple - Multi-row selection would be available by using the Row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focused

Vaya al tema Selección de filas para obtener más información.

Angular Cell Selection

Property cellSelection enables you to specify the following options:

ninguno: la selección de celdas estaría deshabilitada para la cuadrícula
único: la selección de solo una celda dentro de la cuadrícula estaría disponible.
múltiple: actualmente, este es el estado predeterminado de la selección en la cuadrícula. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic continuamente con el botón izquierdo del mouse.

Vaya al tema Selección de celda para obtener más información.

Angular Column Selection

The selectable property enables you to specify the following options for each column:

falso: la selección de la columna correspondiente se desactivará para la cuadrícula
verdadero: la selección de columna correspondiente se habilitará para la cuadrícula
Esto lleva a las siguientes tres variaciones:
Selección única: haga clic con el mouse sobre la celda de la columna.
Selección de varias columnas: mantenga presionado Ctrl + clic del mouse sobre las celdas de la columna.
Selección de columnas de rango: mantener presionada la tecla Mayús + clic del mouse selecciona todo lo que se encuentra en el medio.

Vaya al tema Selección de columnas para obtener más información.

Using the contextMenu event you can add a custom context menu to facilitate your work with IgxGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.

Si hay una selección multicelda, pondremos lógica, que comprobará si la celda seleccionada está en el área de selección multicelda. Si es así, también emitiremos los valores de las celdas seleccionadas.

Básicamente la función principal se verá así:

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;
}

El menú contextual tendrá las siguientes funciones:

Copia el valor de la celda seleccionada.
Copiar la fila de datos de la celda seleccionada
Si la celda seleccionada está dentro de un rango de selección de varias celdas, copie todos los datos seleccionados

//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 });
}

IgxGrid buscará los datos copiados y los pegará en un elemento contenedor.

La plantilla que vamos a utilizar para combinar la grilla con el menú contextual:

<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>

Select multiple cells and press the right mouse button. The context menu will appear and after selecting Copy cells data the selected data will appear in the right empty box. The result is:

Known Issues and Limitations

El uso de Grid con Selección habilitada en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular. IE11 ya no es compatible a partir de la versión 13.0.0.
```
import 'core-js/es7/array';
```
When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
- Selección de fila
- Fila Expandir/contraer
- Edición de filas
- Fijación de filas

API References

Additional Resources

Agregados basados en selección

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.