Selección de celdas Angular

The selection feature enables rich data select capabilities in the Material UI based Tree Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Tree Grid now supports three modes for cell selection, and you can easily switch between them by changing cellSelection property. You can disable cell selection, you can select only one cell within the grid or to select multiple cells in the grid, which is provided as default option. But let's dive deeper in each of these options.

Angular Cell Selection Example

El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de celdas 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 la interacción de cada botón a través de un cuadro de mensaje de snackbar.

Selection types

Tree Grid Multiple-cell Selection

Cómo seleccionar celdas:

• MedianteMouse drag- Se realizaría una selección rectangular de las celdas.
• AlCtrl key pulsar +Mouse drag- Se realizaban múltiples selecciones de rango. Cualquier otra selección celular existente se mantendrá en mando.
• Selección instantánea de múltiples celdas usando la tecla Mays. Selecciona una sola celda y selecciona otra celda única manteniendo pulsada la tecla Mayús. Se seleccionará el rango de celdas entre las dos celdas. Ten en cuenta que si se selecciona otra segunda celda mientras se sostieneShift key, el rango de selección de celda se actualizará en función de la posición de la primera celda seleccionada (punto de inicio).
• Selección multicelda del teclado usando elArrow keys mientras mantiene mantenidoShift key. Se creará un rango de selección multicelular basado en la célula enfocada.
• Selección de múltiples celdas del teclado usando yCtrl + Arrow keys​Ctrl + Home/End mientras mantiene mantenidoShift key. Se creará un rango de selección multicelular basado en la célula enfocada.
• Al hacer clic mientrasLeft Mouse key se mantiene pulsadoCtrl key se añadirán rangos de celdas individuales a la colección de celdas seleccionadas.
• La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.

Manifestación

Tree Grid Single Selection

Cuando configuras el[cellSelection]="'single'", esto te permite tener solo una celda seleccionada en la cuadrícula a la vez. Además, el modomouse drag no funciona y, en vez de seleccionar una celda, esto hará que la selección de texto sea por defecto.

Note

Cuando se seleccionaselected una sola celda, se emite un evento, independientemente de si esselection mode​single omultiple En modo de selección multicelda, cuando seleccionas un rango de celdasrangeSelected, se emite un evento.

Tree Grid None selection

Si quieres desactivar la selección de celdas, simplemente puedes establecer[cellSelection]="'none'" la propiedad. En este modo, cuando haces clic sobre la celda o intentas navegar con el teclado, la celda no está seleccionada, solo seactivation style aplica y se perderá al desplazarte o hacer clic sobre otro elemento de la página. La única forma de definir la selección es utilizando los métodos API que se describen a continuación.

Keyboard navigation interactions

While Shift key is pressed

• Mayús + Flecha arriba para agregar la celda anterior a la selección actual.
• Mayús + Flecha hacia abajo para agregar la siguiente celda a la selección actual.
• Mayús + Flecha izquierda para agregar la celda izquierda a la selección actual.
• Mayús + Flecha derecha para agregar la celda derecha a la selección actual.

While Ctrl + Shift keys are pressed

• Ctrl + Mayús + Flecha arriba para seleccionar todas las celdas encima de la celda enfocada en la columna.
• Ctrl + Mayús + Flecha hacia abajo para seleccionar todas las celdas debajo de la celda enfocada en la columna.
• Ctrl + Shift + Flecha izquierda para seleccionar todas las celdas hasta el inicio de la fila.
• Ctrl + Shift + Flecha derecha para seleccionar todas las celdas hasta el final de la fila.
• Ctrl + Shift + Inicio para seleccionar todas las celdas desde la celda enfocada hasta la primera celda de la cuadrícula
• Ctrl + Shift + Fin para seleccionar todas las celdas desde la celda enfocada hasta la última celda de la cuadrícula

Note

El desplazamiento continuo sólo es posible dentro del cuerpo de Grid.

Api usage

A continuación se detallan los métodos que puede utilizar para seleccionar rangos, borrar la selección u obtener datos de celdas seleccionadas.

Select range

selectRange(range)- Seleccionar un rango de celdas con la API.rowStart yrowEnd debe usar índices de fila ycolumnStart ycolumnEnd podría usar índice de columna o valor de campo de datos de columna.

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);

Note

El rango seleccionado es operación aditiva. No borrará su selección anterior.

Clear cell selection

clearCellSelection()Aprobará la selección actual de celdas.

Get selected data

getSelectedData()devolverá el array de los datos seleccionados en formato según la selección. Ejemplos a continuación:

1. Si se seleccionan tres celdas individuales diferentes:

   expectedData = [
       { CompanyName: 'Infragistics' },
       { Name: 'Michael Langdon' },
       { ParentID: 147 }
   ];
   

2. Si se seleccionan tres celdas de una columna:

   expectedData = [
       { Address: 'Obere Str. 57'},
       { Address: 'Avda. de la Constitución 2222'},
       { Address: 'Mataderos 2312'}
   ];
   

3. Si se seleccionan tres celdas arrastrando el mouse desde una fila y tres columnas:

   expectedData = [
       { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
   ];
   

4. Si se seleccionan tres celdas arrastrando el mouse desde dos filas y tres columnas:

   expectedData = [
       { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
       { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
   ];
   

5. Si se seleccionan dos rangos diferentes:

   expectedData = [
       { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
       { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
       { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
       { Address: 'Fauntleroy Circus', City: 'London'}
   ];
   

6. Si se seleccionan dos rangos superpuestos, el formato sería:

   expectedData = [
       { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
       { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
       { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
       { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
   ];
   

Note

selectedCells()devolverá celdas de todas las filas visibles (filas en el puerto de visión de la cuadrícula) y de todas las columnas, incluidas las que no estén en la vista.getSelectedData() también devolverá los datos de la celda seleccionada.getSelectedRanges(): GridSelectionRange[] devolverá los rangos seleccionados actualmente en la cuadrícula tanto por interacciones de teclado como de punteros. El tipo es GridSelectionRange[].

Features integration

La selección de varias celdas se basa en índices (selección de elementos DOM).

• Sorting- Cuando se realiza la clasificación, la selección no se eliminará. Dejará las celdas seleccionadas igual mientras ordena ascendente o descendente.
• Paging- Al paginar, se limpiarán celdas seleccionadas. La selección no se mantendrá entre páginas.
• Filtering- Cuando se realiza el filtrado, la selección no se eliminará. Si se elimina el filtrado, devolverá - las celdas seleccionadas inicialmente.
• Resizing- Al redimensionar las celdas seleccionadas en columna no se eliminarán.
• Hiding- No eliminará las celdas seleccionadas. Si la columna está oculta, se seleccionarán las celdas de la siguiente columna visible.
• Pinning- La celda seleccionada no será limpiada. Lo mismo que esconderse
• Group by- Al agrupar columnas, las celdas seleccionadas no se limpiarán.

Estilismo

El motor del tema expone propiedades que nos permiten estilizar el rango de celdas seleccionadas.

Import theme

Para empezar a estilizar la selección, necesitamos importar elindex archivo, donde están todas las funciones del tema y los componentes mezclados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Define colors

Una vez hecho, podemos utilizar lascontrast-color funciones ycolor. Con ellos, definimos los colores que queremos usar para nuestra gama de selección:

$text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;

Note

Si no queremos usar lascontrast-color funciones ycolor, siempre podemos codificar los valores de color de forma fija.

Create custom theme

A continuación creamos un nuevo tema que extiende lasgrid-theme variables pasando nuestrotext-color,background-color yborder-yellow como$cell-selected-text-color,$cell-selected-background y$cell-active-border-color, respectivamente:

$custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

Apply theme

Después, todo lo que tenemos que hacer es incluir el mixin en el estilo de nuestro componente (también podría estar en los estilos de la aplicación), para que nuestro igx-tree-grid use el tema recién creado en lugar del predeterminado:

@include css-vars($custom-grid-theme);

Con el tema personalizado aplicado, las celdas de la cuadrícula seleccionadas se resaltan con nuestros colores seleccionados:

Manifestación

Note

La muestra no se verá afectada por el tema global seleccionado deChange Theme.

API References

• IgxTreeGridComponent API_IgxTreeGridRow API
• API IgxGridCell
• IgxTreeGridComponent Styles

Additional Resources

• Descripción general de la cuadrícula de árbol
• Selección
• Selección de fila
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Virtualización y rendimiento

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub