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.

    Ejemplo de selección de cuadrícula Angular

    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.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Opciones de selección de cuadrícula Angular

    El componente IgniteUI para Angular Grid ofrece tres modos de selección diferentes: selección de filas, selección de celdas y selección de columnas. De manera predeterminada, solo el modo de selección de múltiples celdas está habilitado en la cuadrícula. Para cambiar o habilitar el modo de selección, puede usar rowSelection, cellSelection o las propiedades selectable.

    Selección de fila Angular

    La propiedad rowSelection le permite especificar las siguientes opciones:

    • 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
    • múltiple: la selección de varias filas estaría disponible usando los Row selectors, con una combinación de teclas como Ctrl + clic, o presionando la tecla de espacio una vez que una celda esté enfocada.

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

    Selección de celdas Angular

    La propiedad cellSelection le permite especificar las siguientes opciones:

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

    Selección de columna Angular

    La selectable​propiedad le permite especificar las siguientes opciones para cada columna:

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

    Menú contextual de cuadrícula

    Usando el evento contextMenu puedes agregar un menú contextual personalizado para facilitar tu trabajo con IgxGrid. Con un clic derecho en el cuerpo de la grilla, el evento emite la celda en la que se activa. El menú contextual funcionará con la celda emitida.

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

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

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

    Seleccione varias celdas y presione el botón right mouse. Aparecerá el menú contextual y después de seleccionar Copy cells data los datos seleccionados aparecerán en el cuadro vacío de la derecha. El resultado es:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Problemas conocidos y limitaciones

    • 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';
typescript

    • Cuando la cuadrícula no tiene un conjunto primaryKey y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:

      • Selección de fila
      • Fila Expandir/contraer
      • Edición de filas
      • Fijación de filas
    App Builder | CTA Banner

    Referencias de API

    Recursos adicionales

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