Angular Tree Grid Row Selection

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 cuatro tipos de comportamiento de selección de filas de Tree Grid. 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-tree-grid, solo necesitas establecer la propiedad de selección de filas. Esta propiedad acepta la enumeración GridSelectionMode. GridSelectionMode expone los siguientes cuatro modos: ninguno, uno, múltiple y múltipleCascade. A continuación, analizaremos cada uno de ellos con más detalle.

None Selection

Por defecto,igx-tree-grid la selección de fila está desactivada, de lo contrario([rowSelection]="'none'"). Así que no puedes seleccionar ni deseleccionar una fila mediante la interacción con la interfaz de la cuadrícula de árbol; 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.

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

<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
            [rowSelection]="'single'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
</igx-tree-grid>

/* selectionExample.component.ts */

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

Multiple Selection

Para permitir la selección de varias filas en eligx-tree-grid solo establece larowSelection propiedad paramultiple. Esto permitirá un campo selector de filas en cada fila y en la cabecera de la cuadrícula del árbol. 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á.

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

<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [rowSelection]="'multiple'"
        [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)" >
</igx-tree-grid>

Cascade Selection

Para habilitar la selección de filas en cascada en eligx-tree-grid solo establece larowSelection propiedad paramultipleCascade. Esto permitirá un campo selector de filas en cada fila y en la cabecera de la cuadrícula del árbol. El selector de filas permite a los usuarios seleccionar varias filas, lo que seleccionaría a todos los hijos del árbol de abajo. La selección persiste a través de desplazamientos, paginación y operaciones de 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 shift, la selección de un registro padre seleccionará todos sus hijos aunque no estén dentro del rango seleccionado. En este modo de selección, al hacer clic en una sola fila, las filas seleccionadas previamente se desplacerán. Si haces clic mientras mantienes pulsada la tecla ctrl, la fila y sus hijos se alternarán y la selección anterior se conservará.

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

<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true"
        [rowSelection]="'multipleCascade'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
</igx-tree-grid>

En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos. Cuando un padre tiene algunos hijos seleccionados y algunos no seleccionados, su casilla de verificación está en un estado indeterminado.

<!-- 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

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-tree-grid ... [primaryKey]="'ID'">
...
</igx-tree-grid>
...
<button (click)="this.treeGrid.selectRows([1,2,5], true)">Select 1,2 and 5</button> // select rows and clear 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 la Cuadrícula de árbol.

Deselect rows

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

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

<igx-tree-grid ... [primaryKey]="'ID'">
...
</igx-tree-grid>
...
<button (click)="this.treeGrid.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.

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-tree-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-tree-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-tree-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-tree-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.treeGrid.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.

public mySelectedRows = ['Johnathan Winchester', 'Ana Sanders']; // an array of row IDs

<igx-tree-grid primaryKey="ID" rowSelection="multiple" [autoGenerate]="false" [selectedRows]="mySelectedRows" [data]="data">
    <igx-column [field]="'Name'"></igx-column>
    <igx-column [field]="'Title'"></igx-column>
</igx-tree-grid>

Row selector templates

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

Por defecto, la Tree Grid 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-tree-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-tree-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.

Header template

Para crear una plantilla personalizada de selector de cabecera, dentro de la Cuadrícula de Árbol, 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 tienes seleccionadas en ese momento mientrastotalCount que cuántas filas hay en total en la cuadrícula del árbol.

<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-tree-grid [data]="tGridData" primaryKey="ProductID" childDataKey="Products">
    <!-- ... -->
    <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-tree-grid>

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.