Lista de componentes

Angular Tree Grid Column Selection

La función de selección de columnas proporciona una manera fácil de seleccionar una columna completa con un solo clic. Enfatiza la importancia de una columna en particular al enfocarse en las celdas del encabezado y todo lo que se encuentra debajo. La función viene con una API enriquecida que permite la manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas y operaciones y visualizaciones de análisis de datos.

Ejemplo de selección de columna Angular

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.

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxTreeGridComponent, IgxGridToolbarComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular';
import { ORDERS_DATA } from '../data/orders';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'app-tree-grid-column-selection',
    templateUrl: './tree-grid-column-selection.component.html',
    styleUrls: ['./tree-grid-column-selection.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent]
})
export class TreeGridColumnSelectionComponent implements OnInit, AfterViewInit {
    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;
    public currentColumnSelection: GridSelectionMode = 'single';
    public columnConfig = [
        { field: 'ID', header: 'ID', selectable: true },
        { field: 'Name', header: 'Order Product', selectable: true },
        { field: 'Category', header: 'Category', selectable: true },
        { field: 'Units', header: 'Units', selectable: false },
        { field: 'UnitPrice', header: 'Unit Price', selectable: false, formatter: this.formatCurrency },
        { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency },
        { field: 'OrderDate', header: 'Order Date', selectable: true, formatter: this.formatDate },
        { field: 'Delivered', header: 'Delivered', selectable: false }
    ];

    constructor(private cdr: ChangeDetectorRef){}

    public ngOnInit(): void {
        this.data = ORDERS_DATA;
    }

    public ngAfterViewInit(): void {
        this.tGrid.getColumnByName('ID').selected = true;
        this.cdr.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public formatCurrency(value: number) {
        return `$${value.toFixed(2)}`;
    }
}
ts

<div class="grid-wrapper">
  <igx-tree-grid  [igxPreventDocumentScroll]="true"
    [data]="data"
    primaryKey="ID"
    foreignKey = "ParentID"
    height="530px"
    width="100%"
    [columnSelection]="currentColumnSelection">
    <igx-grid-toolbar>

      <igx-select [(ngModel)]="currentColumnSelection">
        <label igxLabel>Column Selection</label>
        <igx-select-item value="none">None</igx-select-item>
        <igx-select-item value="single">Single</igx-select-item>
        <igx-select-item value="multiple">Mulitple</igx-select-item>
      </igx-select>

    </igx-grid-toolbar>

    @for (c of columnConfig; track c) {
      <igx-column
        [field] = "c.field"
        [header] = "c.header"
        [selectable] = "c.selectable"
        [formatter] = "c?.formatter">
      </igx-column>
    }

  </igx-tree-grid>
</div>
html

.grid-wrapper{
    padding: 16px;

    igx-select {
        --ig-size: var(--ig-size-small);
    }
}
scss

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso básico

La función de selección de columnas se puede habilitar a través de la entrada columnSelection, que toma valores de GridSelectionMode.

Interacciones

El modo de selección predeterminado es none. Si se establece en single o multiple todas las columnas presentadas serán selectable. Dicho esto, para poder seleccionar una columna simplemente debemos hacer clic en una, lo que la marcará como selected. Si la columna no se puede seleccionar, no se aplicará ningún estilo de selección en el encabezado mientras se desplaza el cursor.

Multi-column Headers No reflexiones sobre la selectable entrada. El IgxColumnGroupComponent es selectable, si al menos uno de sus elementos secundarios tiene habilitado el comportamiento de selección. Además, el componente se marca como selected si todos sus selectable descendientes lo fueran selected.

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

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular';
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';

@Component({
    selector: 'app-column-group-selection',
    templateUrl: './column-group-selection.component.html',
    styleUrls: ['./column-group-selection.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent]
})
export class TreeGridColumnGroupSelectionComponent implements OnInit {

   @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true })
   public treeGrid: IgxTreeGridComponent;
   public data;

   public ngOnInit(): void {
    this.data = generateEmployeeDetailedFlatData();
    this.treeGrid.selectColumns(['ID', 'Title', 'City']);

  }
}
ts

<div class="grid-wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"
        #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" height="530px" width="100%" columnSelection='multiple'>
        <igx-column field="Name" dataType="string"></igx-column>
        <igx-column-group header="General Information">
            <igx-column field="HireDate" dataType="date"></igx-column>
            <igx-column-group header="Personal Details">
                <igx-column field="ID" dataType="number"></igx-column>
                <igx-column field="Title" dataType="string"></igx-column>
                <igx-column field="Age" dataType="number" [selectable]="false"></igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column-group header="Address Information">
            <igx-column-group header="Location">
                <igx-column field="Country" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="City" dataType="string"></igx-column>
                <igx-column field="Address" dataType="string"></igx-column>
            </igx-column-group>
            <igx-column-group header="Contact Information">
                <igx-column field="Phone" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="Fax" dataType="string" [selectable]="false"></igx-column>
                <igx-column field="PostalCode" dataType="string"></igx-column>
            </igx-column-group>
        </igx-column-group>
    </igx-tree-grid>
</div>
html

.grid-wrapper {
    padding: 16px;
}scss

Combinaciones de teclado

Las combinaciones de teclado están disponibles solo cuando la entrada columnSelection de la cuadrícula 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.

Manipulaciones de API

La API proporciona algunas capacidades adicionales cuando se trata de columnas no visibles, de modo que cada columna oculta se puede marcar como selected configurando el definidor correspondiente.

La declaración anterior también se aplica a IgxColumnGroupComponent, excepto que cuando se cambia la propiedad selected, cambia el estado de sus descendientes.

Puede encontrar más información sobre las manipulaciones de API en la sección API References.

Estilo

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';
scss

Tenga en cuenta que row selection y column selection no se pueden manipular de forma independiente. Dependen de las mismas 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,
  $expand-icon-color: #ecaa53,
  $expand-icon-hover-color: #b64b80
);
scss

Acepta varios parámetros, grid-theme 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.

Usando variables CSS

El último paso es incluir el tema igx-grid personalizado.

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

Manifestación

import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular';
import { ORDERS_DATA } from '../data/orders';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';


@Component({
    selector: 'app-tree-grid-column-selection-style',
    templateUrl: './tree-grid-column-selection-style.component.html',
    styleUrls: ['./tree-grid-column-selection-style.component.scss'],
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridColumnSelectionStylesComponent implements OnInit, AfterViewInit {
    @ViewChild(IgxTreeGridComponent)
    public tGrid: IgxTreeGridComponent;
    public data;

    public columnConfig = [
        { field: 'ID', header: 'ID', selectable: true },
        { field: 'Name', header: 'Order Product', selectable: true },
        { field: 'Category', header: 'Category', selectable: true },
        { field: 'Units', header: 'Units', selectable: true },
        { field: 'UnitPrice', header: 'Unit Price', selectable: true, formatter: this.formatCurrency },
        { field: 'Price', header: 'Price', selectable: true, formatter: this.formatCurrency },
        { field: 'OrderDate', header: 'Order Date', selectable: false, formatter: this.formatDate },
        { field: 'Delivered', header: 'Delivered', selectable: true }
    ];

    constructor(private cd: ChangeDetectorRef) {
    }

    public ngOnInit(): void {
        this.data = ORDERS_DATA;
    }

    public ngAfterViewInit() {
        this.tGrid.selectColumns(['ID', 'UnitPrice']);
        this.cd.detectChanges();
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public formatCurrency(value: number) {
        return `$${value.toFixed(2)}`;
    }
}
ts

<div class="grid-wrapper">
  <igx-tree-grid  [igxPreventDocumentScroll]="true"
    [data]="data"
    primaryKey="ID"
    foreignKey = "ParentID"
    height="530px"
    width="100%"
    columnSelection="multiple">
    @for (c of columnConfig; track c) {
      <igx-column
        [field] = "c.field"
        [header] = "c.header"
        [selectable] = "c.selectable"
        [formatter] = "c?.formatter">
      </igx-column>
    }
  </igx-tree-grid>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

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

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