Angular Tree Grid Column Selection

La función de selección de columna ofrece una forma sencilla de seleccionar una columna entera con un solo clic. Enfatiza la importancia de una columna concreta enfocando la(s) celda(s) de cabecera y todo lo que hay debajo. La característica incluye una granAPI variedad que permite manipular el estado de selección, extraer datos de las fracciones seleccionadas y realizar operaciones de análisis y visualizaciones de datos.

Angular Column Selection Example

El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de columnas de Tree Grid. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.

* Unidades, Precio unitario y Entregado tienen la selección de columna deshabilitada.

Basic usage

La función de selección de columna puede activarse mediante lacolumnSelection entrada, que toma valores de GridSelectionMode.

Interacciones

El modo de selección predeterminado esnone. Si se configura comosingle omultiple todas las columnas presentadas loselectable serán. Dicho esto, para seleccionar una columna, solo tenemos que hacer clic en una, que la marcará comoselected. Si la columna no es seleccionable, no se aplicará ningún estilo de selección en el encabezado mientras se pasa el cursor.

Note

Multi-column HeadersNo reflexiones sobre laselectable entrada. ElIgxColumnGroupComponent isselectable, si al menos uno de sus hijos tiene activado el comportamiento de selección. Además, el componente se marca comoselected si todos susselectable descendientes lo estuvieranselected.

*En Grupo de columnas de detalles personales, solo se pueden seleccionar el ID de columna y el Título.

Keyboard combinations

Note

Las combinaciones de teclado solo están disponibles cuando la entrada de la cuadrículacolumnSelection está configurada en .multiple

Hay dos escenarios para la navegación con el teclado de la función Selección de columnas:

Selección de varias columnas: mantenga presionado Ctrl + clic en cada celda del encabezado seleccionable.
Selección de columnas de rango: al mantener presionada la tecla Mayús + clic se seleccionan todas las columnas seleccionables intermedias.

API manipulations

La API ofrece algunas capacidades adicionales en lo que respecta a las columnas no visibles, de modo que cada columna oculta podría marcarse comoselected configurando el configurador correspondiente.

Note

La afirmación anterior también se aplica a losIgxColumnGroupComponent, excepto que cuando laselected propiedad cambia, cambia el estado de sus descendientes.

Más información sobre las manipulaciones de la API puede encontrarse en laAPI References sección.

Estilismo

Antes de sumergirse en las opciones de estilo, es necesario importar el módulo principal y todos los mixins de componentes.

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

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

Note

Por favor, ten en cuentarow selection que nocolumn selection se puede manipular de forma independiente. Dependen de lo mismovariables.

Dicho esto, sigamos adelante y cambiemos los estilos de selección y desplazamiento.
Siguiendo el enfoque más simple, definamos nuestro tema personalizado.

$custom-grid-theme: grid-theme(
  $row-selected-background: #011627,
  $row-selected-text-color: #ecaa53,
  $row-selected-hover-background: #011627,
  $header-selected-text-color: #ecaa53,
  $header-selected-background: #011627,
  $expand-icon-color: #ecaa53,
  $expand-icon-hover-color: #b64b80
);

Aceptagrid-theme varios parámetros, pero esos son los cinco responsables de cambiar la apariencia de todas las columnas seleccionadas:

$row-selected-background: establece el fondo de la fracción seleccionada.
$row-selected-text-color: establece el color del texto de la fracción seleccionada
$row-selected-hover-background: establece el color de la celda o grupo de celdas sobre las que se encuentra.
$header-selected-text-color: establece el color del texto del encabezado de la columna seleccionada
$header-selected-background: establece el color de fondo del encabezado de la columna seleccionada.