Selección de columnas de cuadrícula jerárquica Angular

The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations.

Angular Column Selection Example

El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de columnas de la cuadrícula jerárquica. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.

* Foto y Debut tienen la selección de columna deshabilitada.

Basic usage

The column selection feature can be enabled through the columnSelection input, which takes GridSelectionMode values.

Interacciones

The default selection mode is none. If set to single or multiple all of the presented columns will be selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

Note

Multi-column Headers don't reflect on the selectable input. The IgxColumnGroupComponent is selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as selected if all of its selectable descendants are selected.

*En Grupo de columnas de ubicación, solo se puede seleccionar la columna Ciudad.

Keyboard combinations

Note

The keyboard combinations are available only when the grid columnSelection input is set to 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

The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as selected by setting the corresponding setter.

Note

The above statement also applies to the IgxColumnGroupComponent, except that when the selected property is changed it changes the state of its descendants.

More information regarding the API manipulations could be found in the API References section.

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

Please note that row selection and column selection can't be manipulated independently. They depend on the same variables.

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
);

The grid-theme accepts several parameters but those are the five responsible for changing the appearance of all selected columns:

$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.