Selección de celdas React Grid

    La selección de celdas Ignite UI for React en React cuadrícula permite capacidades de selección de datos enriquecidas y ofrece una API potente en el IgrGrid componente. La cuadrícula React admite tres modos de selección:

    • Selección de celdas múltiples de cuadrícula
    • Selección única de cuadrícula
    • Cuadrícula Ninguna selección

    Profundicemos en cada una de estas opciones.

    React Ejemplo de selección de celda de cuadrícula

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

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Tipos de selección

    Selección de celdas múltiples de cuadrícula

    Cómo seleccionar celdas:

    • Arrastrando con el mouse: se realizará la selección de datos rectangulares de las celdas.
    • Al presionar la tecla Ctrl + arrastrar el mouse: se realizarán selecciones de rango múltiple. Cualquier otra selección de celda existente se mantendrá.
    • Selección instantánea de varias celdas mediante la tecla Shift. Seleccione una sola celda y seleccione otra celda manteniendo presionada la tecla Mayús. Se seleccionará el rango de celdas entre las dos celdas. Tenga en cuenta que si se selecciona otra segunda celda mientras se mantiene presionada la tecla Mayús, el rango de selección de celdas se actualizará en función de la posición de la primera celda seleccionada (punto de partida).
    • Selección de varias celdas del teclado utilizando las teclas de flecha mientras mantiene presionada la tecla Mayús. Se creará un rango de selección de varias celdas en función de la celda enfocada.
    • Selección de varias celdas del teclado usando las teclas Ctrl + ​ ​ ​ ​ ​ ​ y Ctrl + Inicio / Fin mientras mantiene presionada la tecla Shift. Se creará un rango de selección de varias celdas en función de la celda enfocada.
    • Al hacer clic con la tecla izquierda del mouse mientras mantiene presionada la tecla Ctrl, se agregarán rangos de celdas individuales a la colección de celdas seleccionadas.
    • La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.

    Manifestación

    EXAMPLE
    DATA
    TSX
    CSS

    Selección única de cuadrícula

    Cuando configura cellSelection en single, esto le permite tener solo una celda seleccionada en la cuadrícula a la vez. Además, el modo de arrastre del mouse no funcionará y, en lugar de seleccionar una celda, se realizará la selección de texto predeterminada.

    Cuando se selecciona una sola celda, se emite el evento selected, sin importar si el modo de selección es único o múltiple. En el modo de selección de varias celdas, cuando selecciona un rango de celdas, se emite el evento RangeSelected.

    Cuadrícula Ninguna selección

    Si desea deshabilitar la selección de celdas, puede configurar cellSelection en none. En este modo, cuando hace clic sobre la celda o intenta navegar con el teclado, la celda no se selecciona, solo se aplica el estilo de activación y se perderá cuando se desplace o haga clic sobre otro elemento de la página. La única forma de definir la selección es mediante los métodos API que se describen a continuación.

    Ignite UI for React | CTA Banner

    Interacciones de navegación por teclado

    Mientras se presiona la tecla Shift

    • Shift + para agregar la celda anterior a la selección actual.
    • Shift + para agregar la siguiente celda a la selección actual.
    • Shift + para agregar la celda izquierda a la selección actual.
    • Shift + para agregar la celda derecha a la selección actual.

    Mientras se presionan las teclas Ctrl + Shift

    • Ctrl + Shift + para seleccionar todas las celdas encima de la celda enfocada en la columna.
    • Ctrl + Shift + para seleccionar todas las celdas debajo de la celda enfocada en la columna.
    • Ctrl + Shift + para seleccionar todas las celdas hasta el inicio de la fila.
    • Ctrl + Shift + para seleccionar todas las celdas hasta el final de la fila.
    • Ctrl + Shift + Inicio para seleccionar todas las celdas desde la celda enfocada hasta la primera celda de la cuadrícula
    • Ctrl + Shift + Fin para seleccionar todas las celdas desde la celda enfocada hasta la última celda de la cuadrícula

    El desplazamiento continuo sólo es posible dentro del cuerpo de Grid.

    Uso de API

    A continuación se detallan los métodos que puede utilizar para seleccionar rangos, borrar la selección u obtener datos de celdas seleccionadas.

    Seleccionar rango

    selectRange: seleccione un rango de celdas con la API. rowStart y columnEnd deberían usar índices de fila y columnStart y columnEnd podrían usar el índice de columna o el valor del campo de datos de la columna.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
    gridRef.current.selectRange(range);
    tsx

    Borrar selección de celda

    clearCellSelection borrará la selección de celda actual.

    gridRef.current.clearCellSelection();
    tsx

    Obtener datos seleccionados

    getSelectedData devolverá una matriz de los datos seleccionados en formato según la selección. Ejemplos a continuación:

    • Si se seleccionan tres celdas individuales diferentes:
    expectedData = [
        { CompanyName: 'Infragistics' },
        { Name: 'Michael Langdon' },
        { ParentID: 147 }
    ];
    typescript
    • Si se seleccionan tres celdas de una columna:
    expectedData = [
        { Address: 'Obere Str. 57'},
        { Address: 'Avda. de la Constitución 2222'},
        { Address: 'Mataderos 2312'}
    ];
    typescript
    • Si se seleccionan tres celdas arrastrando el mouse desde una fila y tres columnas:
    expectedData = [
        { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
    ];
    typescript
    • Si se seleccionan tres celdas arrastrando el mouse desde dos filas y tres columnas:
    expectedData = [
        { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
        { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
    ];
    typescript
    • Si se seleccionan dos rangos diferentes:
    expectedData = [
        { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
        { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
        { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
        { Address: 'Fauntleroy Circus', City: 'London'}
    ];
    typescript
    • Si se seleccionan dos rangos superpuestos, el formato sería:
    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'}
    ];
    typescript

    Integración de funciones

    La selección de varias celdas se basa en índices (selección de elementos DOM).

    • Sorting: cuando se realiza la clasificación, la selección no se borrará. Dejará las celdas actualmente seleccionadas iguales mientras se ordenan de forma ascendente o descendente.
    • Paging: al paginar, las celdas seleccionadas se borrarán. La selección no persistirá en todas las páginas.
    • Filtering: cuando se realiza el filtrado, la selección no se borrará. Si se borra el filtrado, volverá a las celdas seleccionadas inicialmente.
    • Resizing: al cambiar el tamaño de la columna, las celdas seleccionadas no se borrarán.
    • Hiding: no borrará las celdas seleccionadas. Si la columna está oculta, se seleccionarán las celdas de la siguiente columna visible.
    • pinning: la celda seleccionada no se borrará. Lo mismo que esconderse
    • groupBy: en la agrupación de columnas, las celdas seleccionadas no se borrarán.

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <IgrGrid className="grid"></IgrGrid>
    tsx

    Luego configure las propiedades CSS relacionadas para esa clase:

    .grid {
        --ig-grid-cell-selected-text-color: #FFFFFF;
        --ig-grid-cell-active-border-color: #f2c43c;
        --ig-grid-cell-selected-background: #0062A3;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    TSX
    CSS

    Referencias de API

    Recursos adicionales

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