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

La función de selección de filas Ignite UI for React de React cuadrícula jerárquica permite a los usuarios seleccionar, resaltar o anular la selección interactiva de una o varias filas de datos. Hay varios modos de selección disponibles en: HierarchicalGrid

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

React Row Selection Example

En el ejemplo siguiente se muestran los tres tipos de HierarchicalGrid Es decir, que Selección de filas comportamiento. Utilice el menú desplegable a continuación para habilitar cada uno de los modos de selección disponibles. Utilice la casilla de verificación para esconder o mostrar las casillas de verificación del selector de filas.

Setup

Para configurar la selección de filas en el HierarchicalGrid, solo necesita establecer la RowSelection propiedad. Esta propiedad acepta la GridSelectionMode enumeración.

GridSelectionMode expone los siguientes modos:

Ninguno
Soltero
Múltiple

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

Ninguna selección

De forma predeterminada, la HierarchicalGrid selección de filas está deshabilitada (RowSelection es Ninguna). Por lo tanto, no puede seleccionar o anular la selección de una fila a través de la interacción con la interfaz de HierarchicalGrid usuario, la única manera de completar estas acciones es usar los métodos de API proporcionados.

Selección única

La selección de una sola fila ahora se puede configurar fácilmente, lo único que debe hacer es establecer RowSelection la Single propiedad. Esto le da la oportunidad de seleccionar solo una fila dentro de una cuadrícula. Puede seleccionar una fila haciendo clic en una celda o presionando la tecla de espacio cuando se enfoca en una celda de la fila y, por supuesto, puede seleccionar una fila haciendo clic en el campo selector de filas. Cuando se selecciona o se anula la selección RowSelectionChanging de fila, se emite un evento.

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

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

Selección múltiple

Para habilitar la selección de varias filas en el HierarchicalGrid simplemente establezca la RowSelection propiedad en Multiple. Esto habilitará un campo selector de filas en cada fila y en el HierarchicalGrid encabezado. El selector de filas permite a los usuarios seleccionar varias filas, y la selección persiste a través del desplazamiento, la paginación y las operaciones de datos, como la ordenación y el filtrado. La fila también se puede seleccionar haciendo clic en una celda o presionando la tecla de espacio cuando una celda está enfocada. Si ha seleccionado una fila y hace clic en otra mientras mantiene presionada la tecla Mayús, esto seleccionará todo el rango de filas. En este modo de selección, al hacer clic en una sola fila, se anulará la selección de las filas seleccionadas anteriormente. Si hace clic mientras mantiene presionada la tecla ctrl, la fila se alternará y se conservará la selección anterior.

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

Notas

La selección de filas activará el evento RowSelectionChanging. Este evento le brinda información sobre la nueva selección, la selección anterior y las filas que se agregaron y eliminaron de la selección anterior. Además, el evento es cancelable, por lo que esto le permite evitar la selección.
Cuando la selección de filas está habilitada, se muestran los selectores de filas, pero si no desea mostrarlos, puede establecerlos HideRowSelectors 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 siguiente fragmento de código se puede utilizar para seleccionar una o varias filas simultáneamente (a través de primaryKey). Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puede elegir si la selección de fila anterior se borrará o no. La selección anterior se conserva de forma predeterminada.

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 agregará las filas que corresponden a las entradas de datos con los identificadores 1, 2 y 5 a la HierarchicalGrid selección.

Deselect Rows

Si necesita anular la selección de filas mediante programación, puede usar el DeselectRows 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ón de filas, se emite el evento RowSelectionChanging. RowSelectionChanging expone los siguientes argumentos:

OldSelection: matriz de ID de fila que contiene el estado anterior de la selección de fila.
NewSelection: matriz de ID de fila que coinciden con el nuevo estado de la selección de fila.
Added: conjunto de ID de fila que se agregan actualmente a la selección.
Removed: conjunto de ID de fila que se eliminan actualmente según el estado de selección anterior.
Event: el evento original que desencadenó el cambio de selección de fila.
Cancel: le permite evitar el cambio de selección de fila.

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

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

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

Select All Rows

Otro método de API útil que HierarchicalGrid proporciona es SelectAllRows. De forma predeterminada, este método seleccionará todas las filas de datos, pero si se aplica el filtrado, seleccionará solo las filas que coincidan con los criterios de filtro. Si llama al método con el parámetro false, SelectAllRows(false) siempre seleccionará todos los datos de la cuadrícula, incluso si se aplica el filtrado.

Nota Tenga en cuenta que SelectAllRows no se seleccionarán las filas que se eliminan.

Deselect All Rows

HierarchicalGrid Proporciona un DeselectAllRows método que, de forma predeterminada, anulará la selección de todas las filas de datos, pero si se aplica el filtrado, anulará la selección solo de las filas que coincidan con los criterios de filtro. Si llama al método con el parámetro false, siempre borrará todo el estado de selección de filas, DeselectAllRows(false) incluso si se aplica el filtrado.

How to get Selected Rows

Si necesita ver qué filas están seleccionadas actualmente, puede obtener sus identificadores de fila con el SelectedRows captador.

public getSelectedRows() {
    const grid = document.getElementById('grid') as IgrHierarchicalGridComponent;
    const currentSelection = grid.selectedRows; // return array of row IDs
}

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

Además, la asignación de ID de fila a SelectedRows le permitirá cambiar el estado de selección de la cuadrícula.

public mySelectedRows = [1, 2, 3]; // an array of row IDs
constructor() {
    const grid = document.getElementById('grid') as IgrHierarchicalGridComponent;
    grid.data = this.data;
    grid.selectedRows = this.mySelectedRows;
}

const mySelectedRows = [1,2,3];

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

Row Selector Templates

Puede crear selectores de encabezado y fila de plantilla en el HierarchicalGrid y también acceder a sus contextos, lo que proporciona una funcionalidad útil para diferentes escenarios.

De forma predeterminada, controla HierarchicalGrid todas las interacciones de selección de filas en el contenedor primario del selector de filas o en la propia fila, dejando solo la visualización de estado de la plantilla. Por lo general, la invalidación de la funcionalidad base debe realizarse mediante el evento RowSelectionChanging. En caso de que implemente una plantilla personalizada con un Click controlador que invalide la funcionalidad base, debe detener la propagación del evento para conservar el estado de fila correcto.

Plantilla de fila

Para crear una plantilla de selector de filas personalizada, dentro de la HierarchicalGrid propiedad puede usar la RowSelectorTemplate propiedad. Desde la plantilla se puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que proporcionan información sobre el estado de la fila.

La propiedad selected muestra si la fila actual está seleccionada o no, mientras que la propiedad index se puede usar para acceder al índice de la fila.

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

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

La rowID propiedad se puede utilizar para obtener una referencia de una HierarchicalGrid fila. Esto es útil cuando se implementa un click controlador en el elemento selector de filas.

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

En el ejemplo anterior, utilizamos IgrCheckbox y vinculamos rowContext.selected a su propiedad checked. Vea esto en acción en nuestra demostración de numeración de filas.

[!Note] The rowContext.select() and rowContext.deselect() methods are exposed in the template context of an HierarchicalGrid. 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.

Header Template

Para crear una plantilla de selector de encabezado personalizada, dentro de la HierarchicalGrid, puede usar la HeadSelectorTemplate propiedad. Desde la plantilla se puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que proporcionan información sobre el estado del encabezado.

La SelectedCount propiedad muestra cuántas filas están seleccionadas actualmente, mientras totalCount que muestra cuántas filas hay en total HierarchicalGrid.

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

Las propiedades SelectedCount y TotalCount se pueden utilizar para determinar si el selector principal debe estar marcado o indeterminado (seleccionado parcialmente).

constructor() {
    const grid = document.getElementById('grid') as IgrHierarchicalGridComponent;
    grid.data = this.data;
    grid.headSelectorTemplate = this.headSelectorTemplate;
}

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return html`<igc-checkbox checked></igc-checkbox>`;
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return html`<igc-checkbox indeterminate></igc-checkbox>`;
        }
        return html`<igc-checkbox></igc-checkbox>`;
}

function headSelectorTemplate(ctx: IgcHeadSelectorTemplateContext) {
    const implicit: any = ctx.dataContext.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 de un HierarchicalGrid puede tener sus propias plantillas de fila y encabezado.

[!Note] The headContext.selectAll() and headContext.deselectAll() methods are exposed in the template context of an HierarchicalGrid. 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 demostración muestra el uso de selectores de filas y encabezados personalizados. Este último se utiliza RowContext.Index para mostrar números de fila y un IgrCheckbox enlace a selected.

Conditional Selection Demo

Esta demostración evita que se seleccionen algunas filas mediante el evento RowSelectionChanging y una plantilla personalizada con la casilla de verificación deshabilitada para filas no seleccionables.

API References

HierarchicalGrid
HierarchicalGridRow
IgrCell

Additional Resources

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