React Selección de filas de cuadrícula

    The Ignite UI for React Row Selection feature in React Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgrGrid:

    • Ninguna selección
    • Selección múltiple
    • Selección única

    React Row Selection Example

    La muestra siguiente muestra los tres tipos deIgrGrid 's Selección de filas comportamiento. Utiliza el desplegable de abajo para activar cada uno de los modos de selección disponibles. Usa la casilla para Esconderse o Programa las casillas de selección de filas.

    Setup

    Para configurar la selección de filas en elIgrGrid, solo necesitas establecer larowSelection propiedad. Esta propiedad aceptaGridSelectionMode enumeración.

    GridSelectionModeexpone los siguientes modos:

    • Ninguno
    • Soltero
    • Múltiple

    A continuación veremos cada uno de ellos con más detalle.

    Ninguna selección

    Por defectoIgrGrid, la selección de fila está deshabilitada (rowSelectiones Ninguna). Así que no puedes seleccionar o deseleccionar una fila mediante la interacción con laIgrGrid interfaz; la única forma de completar estas acciones es usar los métodos de la API proporcionados.

    Selección única

    La selección de una sola fila ahora se puede configurar fácilmente, lo único que tienes que hacer es ponerrowSelection enSingle propiedad. Esto te da la oportunidad de seleccionar solo una fila dentro de una cuadrija. Puedes seleccionar una fila haciendo clic en una celda o pulsando la SPACE tecla cuando enfocas una celda de la fila, y por supuesto puedes seleccionar una fila haciendo clic en el campo selector de filas. Cuando se selecciona la fila o se desseleccionaRowSelectionChanging, se emite un evento.

    const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}

<IgrGrid rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}>
</IgrGrid>

    Selección múltiple

    Para permitir la selección de varias filas en elIgrGrid solo establece larowSelection propiedad paraMultiple. Esto permitirá un campo selector de filas en cada fila y en elIgrGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, manteniéndose la selección durante operaciones de desplazamiento, paginación y datos, como ordenar y filtrar. La fila también puede seleccionarse haciendo clic en una celda o pulsando la SPACE tecla cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes pulsada la SHIFT tecla, esto seleccionará todo el rango de filas. En este modo de selección, cuando haces clic en una sola fila, las filas seleccionadas anteriores se desseleccionan. Si haces clic mientras mantienes pulsada la CTRL tecla, la fila se alternará y la selección anterior se conservará.

    <IgrGrid primaryKey="ProductID" rowSelection="multiple"
        allowFiltering={true} autoGenerate={true}>
</IgrGrid>

    Notas

    • La selección de fila activaráRowSelectionChanging el evento. Este evento te proporciona información sobre la nueva selección, la selección antigua, las filas que se han añadido y eliminado de la selección antigua. Además, el evento se puede cancelar, así que esto te permite evitar la selección.
    • Cuando la selección de filas está activada, se muestran los selectores de filas, pero si no quieres mostrarlos, puedes ponerlohideRowSelectors en true.
    • Cuando cambia entre modos de selección de filas en tiempo de ejecución, esto borrará el estado de selección de filas anterior.

    API usage

    Select Rows Programmatically

    El fragmento de código que aparece a continuación puede usarse para seleccionar una o varias filas simultáneamente (víaprimaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puedes elegir si la selección de fila anterior se limpia o no. La selección anterior se conserva por defecto.

    function onClickSelect() {
    gridRef.current.selectRows([1,2,5], true);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrGrid>
<button onClick={onClickSelect}>Select 1,2 and 5</button>

    Esto añadirá las filas que corresponden a las entradas de datos con IDs 1, 2 y 5 a laIgrGrid selección.

    Deselect Rows

    Si necesitas deseleccionar filas programáticamente, puedes usar eldeselectRows método.

    function onClickDeselect() {
    gridRef.current.deselectRows([1,2,5]);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrGrid>
<button onClick={onClickDeselect}>Deselect 1,2 and 5</button>

    Row Selection Event

    Cuando hay algún cambio en la selecciónRowSelectionChanging de fila, se emite un evento .RowSelectionChanging expone los siguientes argumentos:

    • OldSelection- array de identificadores de fila que contiene el estado anterior de la selección de fila.
    • NewSelection- array de identificadores de fila que coinciden con el nuevo estado de la selección de fila.
    • Added- array de identificadores de fila que se añaden actualmente a la selección.
    • Removed- array de identificadores de fila que actualmente se eliminan según el estado de selección antiguo.
    • Event- el evento original que desencadenó el cambio de selección de fila.
    • Cancel- Permite prevenir el cambio de selección de fila.
    const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

<IgrGrid onRowSelectionChanging={handleRowSelectionChange}>
</IgrGrid>

    Select All Rows

    Otro método útil de API queIgrGrid proporciona esselectAllRows Por defecto, este método seleccionará todas las filas de datos, pero si se aplica filtrado, seleccionará solo las filas que coincidan con los criterios del filtro. Si llamas al método con un parámetro falso,SelectAllRows(false) siempre seleccionará todos los datos de la cuadrícula, incluso si se aplica filtrado.

    Nota Ten en cuenta que esoselectAllRows no seleccionará las filas que se eliminan.

    Deselect All Rows

    IgrGridproporciona undeselectAllRows método que, por defecto, deselecciona todas las filas de datos, pero si se aplica filtrado solo deselecciona las filas que cumplen con los criterios del filtro. Si llamas al método con un parámetro falso,DeselectAllRows(false) siempre borrará todo el estado de selección de fila incluso si se aplica filtrado.

    How to get Selected Rows

    Si necesitas ver qué filas están seleccionadas actualmente, puedes obtener sus identificadores de fila con elselectedRows getter.

    function getSelectedRows() {
    return gridRef.current.selectedRows;
}

    Además, asignar identificadores de fila aselectedRows te permitirá cambiar el estado de selección de la cuadrícula.

    const mySelectedRows = [1,2,3];

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}>
</IgrGrid>

    Row Selector Templates

    Puedes crear plantillas de seleccionadores de cabecera y fila en elIgrGrid y también acceder a sus contextos, que ofrecen funcionalidad útil para diferentes escenarios.

    Por defecto, elIgrGrid gestiona todas las interacciones de selección de filas en el contenedor padre del selector de filas o en la propia fila, dejando solo la visualización de estado para la plantilla. Sobrescribir la funcionalidad base debería hacerse generalmente usando el Evento de RowSelectionChanging. En caso de que implementes una plantilla personalizada con unclick que anula la funcionalidad base, deberías detener la propagación del evento para preservar el estado correcto de la fila.

    Plantilla de fila

    To create a custom row selector template, within the IgrGrid you can use the rowSelectorTemplate property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.

    Laselected propiedad indica si la fila actual está seleccionada o no, mientras que laindex propiedad puede usarse para acceder al índice de filas.

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox checked></IgrCheckbox>
                </div>
            </>
        );
    } else {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox></IgrCheckbox>
                </div>
            </>
        );
    }
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}>
</IgrGrid>

    The rowID property can be used to get a reference of an IgrGrid row. This is useful when you implement a click handler on the row selector element.

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    return (
        <>
            <IgrCheckbox onClick={(event) => onSelectorClick(event, ctx.implicit.key)}>
            </IgrCheckbox>
        </>
    );
}

    En el ejemplo anterior estamos usando unIgrCheckbox y nos vinculamosrowContext.selected a suchecked propiedad. Mira esto en acción en nuestra Demo de Numeración de Filas.

    Plantilla de encabezado

    Para crear una plantilla personalizada de selector de cabecera, dentro de ,IgrGrid puedes usar laheadSelectorTemplate propiedad. Desde la plantilla puedes acceder a la variable de contexto proporcionada implícitamente, con propiedades que te dan información sobre el estado del encabezado.

    LaselectedCount propiedad te muestra cuántas filas están seleccionadas en ese momento ytotalCount cuántas filas hay en total.IgrGrid​

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    return (
        <>
            {ctx.implicit.selectedCount} / {ctx.implicit.totalCount}
        </>
    );
};

    LasselectedCount propiedades ytotalCount pueden usarse para determinar si el selector de cabeza debe estar marcado o indeterminado (parcialmente seleccionado).

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox checked></IgrCheckbox>
                </>
            );
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox indeterminate></IgrCheckbox>
                </>
            );
        }
        return (
            <>
                <IgrCheckbox ></IgrCheckbox>
            </>
        );
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}>
</IgrGrid>

    Row Numbering Demo

    Esta demo muestra el uso de selectores personalizados de cabecera y filas. Este último se utilizaindex para mostrar números de fila y unIgrCheckbox bound toselected.

    Excel Style Row Selectors Demo

    Esta demostración utiliza plantillas personalizadas que se parecen a los selectores de filas y encabezados similares a los de Excel.

    Conditional Selection Demo

    Esta demo impide que algunas filas se seleccionen usando elRowSelectionChanging evento y una plantilla personalizada con la casilla desactivada para filas no seleccionables.

    API References

    Additional Resources

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