Lista de componentes

Angular Tree Grid Selection

Con Ignite UI for Angular cuadrícula de árbol, puede seleccionar datos fácilmente mediante el uso de una variedad de eventos, una API enriquecida o con interacciones simples del mouse como la selección única.

Ejemplo de selección de cuadrícula Angular

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.

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxSnackbarComponent, IgxTreeGridComponent, IgxButtonGroupComponent, IgxColumnComponent, IgxIconComponent } from 'igniteui-angular';
import { generateEmployeeFlatData } from '../data/employees-flat';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';


@Component({
    selector: 'app-tree-grid-cell-selection',
    styleUrls: ['./tree-grid-cellSelection.component.scss'],
    templateUrl: 'tree-grid-cellSelection.component.html',
    imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSnackbarComponent, IgxIconComponent]
})
export class TreeGridCellSelectionComponent implements OnInit {

    @ViewChild('treegrid', { static: true }) public treeGrid: IgxTreeGridComponent;
    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;

    public data: any[];
    public selection = true;
    public selectionMode: GridSelectionMode = 'multiple';
    public selectionModes = [];

    constructor() { }

    public ngOnInit(): void {
        this.data = generateEmployeeFlatData();
        this.selectionModes = [
            { label: 'none', selected: this.selectionMode === 'none', togglable: true },
            { label: 'single', selected: this.selectionMode === 'single', togglable: true },
            { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true }
        ];
        this.snackbar.autoHide = false;
        this.snackbar.open();
    }

    public selectCellSelectionMode(args) {
        this.selectionMode = this.selectionModes[args.index].label;
        this.snackbar.open();
    }
}
ts

<div class="grid__wrapper">
  <span class="button-group-wrapper">
    <igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup>
  </span>
  <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" [height]="'530px'" [width]="'100%'" primaryKey="ID" foreignKey="ParentID"
    [cellSelection]="selectionMode">
    <igx-column [field]="'ID'"></igx-column>
    <igx-column [field]="'Name'"></igx-column>
    <igx-column [field]="'Age'" [dataType]="'number'"></igx-column>
    <igx-column [field]="'Title'"></igx-column>
    <igx-column [field]="'HireDate'" [dataType]="'boolean'">
    </igx-column>
    <igx-column [field]="'OnPTO'" [dataType]="'date'"></igx-column>
  </igx-tree-grid>
</div>

<igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
  <div class="container">
    <igx-icon>notification_important</igx-icon>
    @if (selectionMode === 'multiple') {
      <ul>
        <li><b>This is the default selection behavior.</b></li>
        <li>Click on a cell and while pressing the mouse key perform drag action.
        </li>
        <li>Select a cell and press Shift + Arrow down key, this will start range selection as well.
        </li>
      </ul>
    }
    @if (selectionMode === 'single') {
      <ul>
        <li><b>Now you can select only one cell within the grid.</b></li>
        <li>On single cell click the previous selection state will be cleared.</li>
        <li>The mouse drag will not work and instead of selecting a cell, this will make default text
        selection.</li>
      </ul>
    }
    @if (selectionMode === 'none') {
      <ul>
        <li><b>Now you are unable to select a cell while interacting with grid UI.</b></li>
        <li>If you need to select a cell, you can use the grid API methods.</li>
      </ul>
    }
  </div>
</igx-snackbar>
html

.grid__wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 16px 24px;
    flex-flow: column;
    align-items: flex-start;
    padding-top: 16px;
    position: relative;
}

.button-group-wrapper {
    margin-bottom: 16px;
}

.igx-snackbar {
    background: rgba(0, 0, 0, 0.7);
}

.container {
    display: flex;
    igx-icon {
        margin: 20px;
    }
}
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.

Opciones de selección de cuadrícula Angular

El componente IgniteUI para Angular Tree Grid ofrece tres modos de selección diferentes: selección de filas, selección de celdas y selección de columnas. De manera predeterminada, solo el modo de selección de múltiples celdas está habilitado en Tree Grid. Para cambiar o habilitar el modo de selección, puede usar rowSelection, cellSelection o las propiedades selectable.

Selección de fila Angular

La propiedad rowSelection le permite especificar las siguientes opciones:

ninguno: la selección de filas estaría deshabilitada para la cuadrícula de árbol
single: la selección de solo una fila dentro de la cuadrícula de árbol estaría disponible
múltiple: la selección de varias filas estaría disponible usando los Row selectors, con una combinación de teclas como Ctrl + clic, o presionando la tecla de espacio una vez que una celda esté enfocada.
cascada múltiple: este es un modo de selección en cascada, que da como resultado la selección de todos los elementos secundarios en el árbol debajo del registro que el usuario selecciona con la interacción del usuario. En este modo, el estado de selección de un padre depende completamente del estado de selección de sus hijos.

Vaya al tema Selección de filas para obtener más información.

Selección de celdas Angular

La propiedad cellSelection le permite especificar las siguientes opciones:

ninguno: la selección de celdas estaría deshabilitada para la cuadrícula de árbol
único: la selección de solo una celda dentro de la cuadrícula de árbol estaría disponible.
múltiple: actualmente, este es el estado predeterminado de la selección en la cuadrícula de árbol. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic continuamente con el botón izquierdo del mouse.

Vaya al tema Selección de celda para obtener más información.

Selección de columna Angular

La selectablepropiedad le permite especificar las siguientes opciones para cada columna:

falso: la selección de la columna correspondiente se desactivará para la cuadrícula de árbol
verdadero: la selección de columna correspondiente se habilitará para la cuadrícula de árbol
Esto lleva a las siguientes tres variaciones:
Selección única: haga clic con el mouse sobre la celda de la columna.
Selección de varias columnas: mantenga presionado Ctrl + clic del mouse sobre las celdas de la columna.
Selección de columnas de rango: mantener presionada la tecla Mayús + clic del mouse selecciona todo lo que se encuentra en el medio.

Vaya al tema Selección de columnas para obtener más información.

Problemas conocidos y limitaciones

El uso de Tree Grid con la selección habilitada en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular. IE11 ya no es compatible a partir de la versión 13.0.0.
```
import 'core-js/es7/array';
typescript
```
Cuando la cuadrícula no tiene un conjunto primaryKey y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado después de un dato. solicitud completa:
- Selección de fila
- Fila Expandir/contraer
- Edición de filas
- Fijación de filas

Referencias de API

Recursos adicionales

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