Web Components Descripción general de la selección de cuadrícula jerárquica

Con la función de selección Ignite UI for Web Components en Web Components cuadrícula jerárquica, puede interactuar y manipular fácilmente los datos mediante simples interacciones con el mouse. Hay tres modos de selección disponibles:

Selección de fila
Selección de celda
Column selection

Con la propiedad rowSelection, puede especificar:

Ninguno
Soltero
Selección múltiple

Web Components Ejemplo de selección de cuadrícula jerárquica

En el ejemplo siguiente se muestran tres tipos de comportamientos de selección de celdas en el IgcHierarchicalGridComponent. Utilice los botones de abajo para activar cada uno de los modos de selección disponibles.

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditorHierarchicalGrid: IgcPropertyEditorPanelComponent
    private cellSelectionEditorHierarchicalGrid: IgcPropertyEditorPropertyDescriptionComponent
    private cellSelectionEditorRowIsland: IgcPropertyEditorPropertyDescriptionComponent
    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorHierarchicalGrid = this.propertyEditorHierarchicalGrid = document.getElementById('PropertyEditorHierarchicalGrid') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditorHierarchicalGrid = this.cellSelectionEditorHierarchicalGrid = document.getElementById('CellSelectionEditorHierarchicalGrid') as IgcPropertyEditorPropertyDescriptionComponent;
        var cellSelectionEditorRowIsland = this.cellSelectionEditorRowIsland = document.getElementById('CellSelectionEditorRowIsland') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;

        this._bind = () => {
            propertyEditorHierarchicalGrid.componentRenderer = this.renderer;
            propertyEditorHierarchicalGrid.target = this.hierarchicalGrid;
            cellSelectionEditorRowIsland.changed = this.webRowIslandCellSelectionChange;
            hierarchicalGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webRowIslandCellSelectionChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var rowIsland = this.rowIsland;
        if (rowIsland)
            rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditorHierarchicalGrid"
        id="PropertyEditorHierarchicalGrid"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            label="Hierarchical Grid Cell Selection"
            property-path="CellSelection"
            name="CellSelectionEditorHierarchicalGrid"
            id="CellSelectionEditorHierarchicalGrid"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            label="Row Island Cell Selection"
            property-path=""
            name="CellSelectionEditorRowIsland"
            id="CellSelectionEditorRowIsland"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple, MultipleCascade"
            drop-down-values="None, Single, Multiple, MultipleCascade">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="USBillboard200"
                header="US Billboard 200"
                data-type="string">
                </igc-column>
            </igc-row-island>
        </igc-hierarchical-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

css

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

Web Components Opciones de selección de cuadrícula jerárquica

El componente Ignite UI for Web Components IgcHierarchicalGridComponent proporciona tres modos de selección diferentes: selección de filas, selección de celdas y selección de columnas. De forma predeterminada, solo el modo de selección de celdas múltiples está habilitado en el IgcHierarchicalGridComponent. Para cambiar/habilitar el modo de selección, cellSelection puede usar rowSelection o selectable propiedades.

Web Components Selección de filas de cuadrícula jerárquica

La propiedad rowSelection le permite especificar las siguientes opciones:

None- La selección de filas se deshabilitaría para el IgcHierarchicalGridComponent.
Single- La selección de solo una fila dentro de la IgcHierarchicalGridComponent estaría disponible.
Multiple: la selección de varias filas estaría disponible usando los selectores de filas, con una combinación de teclas como Ctrl + clic, o presionando la tecla de espacio una vez que una celda está enfocada.

MultipleCascade- Este es un modo para la selección en cascada, lo 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 elemento primario depende completamente del estado de selección de sus elementos secundarios.

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

Web Components Selección de celdas de cuadrícula jerárquica

La propiedad cellSelection le permite especificar las siguientes opciones:

None- La selección de celda se deshabilitaría para el IgcHierarchicalGridComponent.
Single- La selección de una sola celda dentro de la IgcHierarchicalGridComponent estaría disponible.
Multiple- Actualmente, este es el estado predeterminado de la selección en el IgcHierarchicalGridComponent. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic con el botón izquierdo del mouse continuamente.

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

Web Components Selección de columnas de cuadrícula jerárquica

La selectable propiedad permite especificar las siguientes opciones para cada uno IgcColumnComponent. La selección de columna correspondiente se habilitará o deshabilitará si esta propiedad se establece en true o false, respectivamente.

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

Cuando la cuadrícula no tiene primaryKey establecida 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

IgcHierarchicalGridComponent

Recursos adicionales

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