Selección de filas en cuadrícula jerárquica React

La función de selección de filas Ignite UI for React en React Jerarchical Grid permite a los usuarios seleccionar, resaltar o deseleccionar de forma interactiva una o varias filas de datos. Hay varios modos de selección disponibles en elIgrHierarchicalGrid:

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

React Row Selection Example

La muestra siguiente muestra los tres tipos deIgrHierarchicalGrid '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 elIgrHierarchicalGrid, 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 defectoIgrHierarchicalGrid, la selección de fila está deshabilitada (rowSelectiones Ninguna). Así que no puedes seleccionar o deseleccionar una fila mediante la interacción con laIgrHierarchicalGrid 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;
    }
}

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

Selección múltiple

Para permitir la selección de varias filas en elIgrHierarchicalGrid solo establece larowSelection propiedad paraMultiple. Esto permitirá un campo selector de filas en cada fila y en elIgrHierarchicalGrid 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á.

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

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

<IgrHierarchicalGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrHierarchicalGrid>
<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 laIgrHierarchicalGrid selección.

Deselect Rows

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

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

<IgrHierarchicalGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrHierarchicalGrid>
<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.

Owner- Si el evento se activa desde una cuadrícula hija, esto te dará una referencia al componente del que se emite el evento.

const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

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

Select All Rows

Otro método útil de API queIgrHierarchicalGrid 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

IgrHierarchicalGridproporciona 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];

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

Row Selector Templates

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

Por defecto, elIgrHierarchicalGrid 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

Para crear una plantilla personalizada de selector de filas, dentro deIgrHierarchicalGrid puedes usar larowSelectorTemplate propiedad. Desde la plantilla puedes acceder a la variable de contexto que proporciona implícitamente, con propiedades que te dan información sobre el estado de la fila.

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

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

LarowID propiedad puede usarse para obtener una referencia de unaIgrHierarchicalGrid fila. Esto es útil cuando implementas unclick manejador en el elemento selector de filas.

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.

[!Note] The rowContext.select() and rowContext.deselect() methods are exposed in the template context of an IgrHierarchicalGrid. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality.

Plantilla de encabezado

Para crear una plantilla personalizada de selector de cabecera, dentro de ,IgrHierarchicalGrid 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.IgrHierarchicalGrid

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

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

Cada nivel jerárquico en unIgrHierarchicalGrid puede tener su propia fila y plantilla de cabecera.

[!Note] The headContext.selectAll() and headContext.deselectAll() methods are exposed in the template context of an IgrHierarchicalGrid. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality.

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.

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

IgrHierarchicalGrid
HierarchicalGridRow

Additional Resources

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