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

Con la selección de filas en Ignite UI for Angular, hay una columna selectora de filas que precede a todas las demás columnas dentro de la fila. Cuando un usuario hace clic en el selector de filas, la fila se seleccionará o anulará la selección, lo que permitirá al usuario seleccionar varias filas de datos.

Angular Row Selection Example

El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de filas de la cuadrícula jerárquica. 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. Utilice el botón de cambio para ocultar o mostrar la casilla de verificación del selector de filas.

Setup

Para configurar la selección de filas en eligx-hierarchical-grid, solo necesitas establecer la propiedad de selección de filas. Esta propiedad acepta la enumeración GridSelectionMode. GridSelectionMode expone los siguientes tres modos: ninguno, uno y múltiple. A continuación, analizaremos cada uno de ellos con más detalle.

None Selection

Por defecto,igx-hierarchical-grid la selección de fila está desactivada, de lo contrario([rowSelection]="'none'"). Por lo tanto, no puedes seleccionar ni deseleccionar una fila mediante la interacción con la interfaz de cuadrícula jerárquica; la única forma de completar estas acciones es usar los métodos de la API proporcionados.

Single Selection

La selección de una sola fila ahora se puede configurar fácilmente, lo único que tienes que hacer es establecer[rowSelection] = '"single"' propiedades. 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 tecla espaciador 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 o se deselecciona el evento de cambioSelección de fila.

<igx-hierarchical-grid [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

/* selectionExample.component.ts */

public handleRowSelection(event) {
    if (args.added.lenght && args.added[0] === 3) {
        args.cancel = true;
    }
}

Multiple Selection

Para permitir la selección de varias filas en eligx-hierarchical-grid solo establece larowSelection propiedad paramultiple. Esto permitirá un campo selector de filas en cada fila y en la cabecera de la Cuadrícula Jerárquica. 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 tecla espaciadora cuando una celda está enfocada. Si has seleccionado una fila y haces clic en otra mientras mantienes pulsada la tecla Mays, 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 tecla ctrl, la fila se alternará y la selección anterior se conservará.

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

<!-- selectionExample.component.ts -->

 public handleRowSelection(event: IRowSelectionEventArgs) {
    // use event.newSelection to retrieve primary key/row data of latest selected row
    this.selectedRowsCount = event.newSelection.length;
    this.selectedRowIndex = event.newSelection[0];
 }

Notas

Para que haya una selección adecuada de filas y celdas, mientras que Hierarchical Grid tiene virtualización remota, debería proporcionarse unprimaryKey
Cuando la cuadrícula jerárquica tiene virtualización remota, al hacer clic en la casilla de verificación del encabezado se seleccionarán/deseleccionarán todos los registros que se encuentran actualmente en la cuadrícula. Cuando se cargan datos nuevos en la cuadrícula jerárquica a pedido, las filas recién agregadas no se seleccionarán y es una limitación, por lo que debe manejar ese comportamiento usted mismo y puede seleccionar estas filas utilizando los métodos API proporcionados.
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 configurarlo[hideRowSelectors] = 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 a continuación puede usarse para seleccionar una o varias filas simultáneamente (a travésprimaryKey de); 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.

<!-- selectionExample.component.html -->

<igx-hierarchical-grid ... [primaryKey]="'artist'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.selectRows([1,2,5], false)">Select 1,2 and 5</button> // select rows and preserve previous selection state

Esto agregará las filas que corresponden a las entradas de datos con los ID 1, 2 y 5 a la selección de Cuadrícula jerárquica.

Deselect rows

Si necesitas deseleccionar filas programáticamente, puedes usar eldeselectRows(rowIds: []) método.

<!-- selectionExample.component.html -->

<igx-hierarchical-grid ... [primaryKey]="'ID'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.deselectRows([1,2,5])">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 datos de filas que contiene el estado anterior de la selección de fila.
newSelection- array de datos de filas que coinciden con el nuevo estado de la selección de fila.
added- array de datos de filas que se añaden actualmente a la selección.
removed- array de datos de filas 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.

Evento de selección de fila en escenarios de datos remotos

En escenarios de datos remotos, cuando la cuadrícula tiene unprimaryKey argumento set,rowSelectionChanging.oldSelection evento no contendrá el objeto de datos completo de fila para las filas que actualmente están fuera de la vista de datos. En este caso,rowSelectionChanging.oldSelection object contendrá solo una propiedad, que es elprimaryKey campo. Para el resto de las filas, actualmente en la vista de datos,rowSelectionChanging.oldSelection contendrán los datos completos de la fila.

<!-- selectionExample.component.html -->

<igx-hierarchical-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-hierarchical-grid>

/* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.cancel = true; // this will cancel the row selection
}

Select all rows

Otro método útil de API queigx-hierarchical-grid proporciona esselectAll(onlyFilteredData) 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. Pero si llamas al método con parámetro falso,selectAll(false) siempre seleccionará todos los datos de la cuadrícula, incluso si se aplica filtrado.

Note

Ten en cuenta que esoselectAll() no seleccionará las filas que se eliminan.

Deselect all rows

igx-hierarchical-gridProporcionadeselectAll(onlyFilteredData) el método, que por defecto deseleccionará todas las filas de datos, pero si se aplica filtrado solo seleccionará las filas que coincidan con los criterios del filtro. Pero si llamas al método con un parámetro falso,deselectAll(false) siempre borrará todos los estados 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.


public getSelectedRows() {
    const currentSelection = this.hierarchicalGrid.selectedRows; // return array of row IDs
}

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

// arrays of row IDs
public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri'];
public childSelectedRows = ['Initiation', 'Emergency'];

<igx-hierarchical-grid primaryKey="Artist" rowSelection="multiple" [autoGenerate]="false" [selectedRows]="mySelectedRows" [data]="data">
    <igx-column field="Artist"></igx-column>
    <igx-row-island [key]="'Albums'" rowSelection="multiple">
        <igx-column field="Album"></igx-column>
        <igx-column field="LaunchDate"></igx-column>
    </igx-row-island>
</igx-hierarchical-grid>

Row selector templates

Puede crear plantillas de encabezados y selectores de filas en la cuadrícula jerárquica y también acceder a sus contextos, lo que proporciona una funcionalidad útil para diferentes escenarios.

Por defecto, la Cuadrícula Jerárquica 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 elrowSelectionChanging evento. En caso de que implementes una plantilla personalizada con unclick handler que anule 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 de ,igx-hierarchical-grid declara una<ng-template> directiva withigxRowSelector. 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.

<ng-template igxRowSelector let-rowContext>
    {{ rowContext.index }}
    <igx-checkbox
        [checked]="rowContext.selected"
        [readonly]="true"
    ></igx-checkbox>
</ng-template>

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

<ng-template igxRowSelector let-rowContext>
    <igx-checkbox (click)="onSelectorClick($event, rowContext.key)"></igx-checkbox>
</ng-template>

En el ejemplo anterior estamos usando unigx-checkbox y nos vinculamosrowContext.selected a suchecked propiedad. Mira esto en acción en nuestroRow Numbering Demo.

Note

LosrowContext.select() métodos yrowContext.deselect() se exponen en el contexto de plantilla de unigx-hierarchical-grid. Facilitan cambiar la fila actual, especialmente en una cuadrícula hija, cuando implementas un manejador de clics que anula la funcionalidad base.

Header template

Para crear una plantilla personalizada de selector de cabecera, dentro de la Cuadrícula Jerárquica, declara una<ng-template> directiva withigxHeadSelector. 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 en la Cuadrícula Jerárquica.

<ng-template igxHeadSelector let-headContext>
    {{ headContext.selectedCount }} / {{ headContext.totalCount  }}
</ng-template>

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

<igx-hierarchical-grid [data]="hGridData" primaryKey="ProductID">
    <ng-template igxHeadSelector let-headContext>
        <igx-checkbox
            [checked]="headContext.selectedCount > 0 && headContext.selectedCount === headContext.totalCount"
            [indeterminate]="headContext.selectedCount > 0 && headContext.selectedCount !== headContext.totalCount">
        </igx-checkbox>
    </ng-template>

    <igx-row-island [key]="'ProductInfo'">
        <ng-template igxHeadSelector let-childHeadContext>
            <!-- header template goes here -->
        </ng-template>
        <ng-template igxRowSelector let-childRowContext>
            <!-- row template goes here -->
        </ng-template>
    </igx-row-island>
</igx-hierarchical-grid>

Cada nivel jerárquico en unigx-hierarchical-grid puede tener su propia fila y plantilla de cabecera.

Note

LosheadContext.selectAll() métodos yheadContext.deselectAll() se exponen en el contexto de plantilla de unigx-hierarchical-grid. Facilitan cambiar todas las filas, especialmente en una cuadrícula hija, cuando implementas un manejador de clics que anula la funcionalidad base.

Row Numbering Demo

Esta demo muestra el uso de selectores personalizados de cabecera y filas. Este último se utilizarowContext.index para mostrar números de fila y unigx-checkbox bound torowContext.selected.

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.

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

Angular Row Selection Example

Setup

None Selection

Single Selection

Multiple Selection

API usage

Select rows programmatically

Deselect rows

Row selection event

Evento de selección de fila en escenarios de datos remotos

Select all rows

Note

Deselect all rows

How to get selected rows

Row selector templates

plantilla de fila

Note

Header template

Note

Row Numbering Demo

Conditional Selection Demo

API References

Additional Resources

Tematización