Web Components Edición de cuadrícula jerárquica

La función de edición de celdas Ignite UI for Web Components de Web Components cuadrícula jerárquica proporciona una forma sencilla de realizar operaciones de manipulación de datos, como crear, actualizar y eliminar registros. Le IgcHierarchicalGridComponent proporciona una potente API pública que le permite personalizar la forma en que se realizan estas operaciones. Las fases de la manipulación de datos son:

• Edición de celdas
• Edición de filas
• Edición por lotes (próximamente)

Configuración

Para especificar qué modo de edición se debe habilitar, expone IgcHierarchicalGridComponent las siguientes propiedades booleanas -editable and rowEditable.

La propiedad editable le permite especificar las siguientes opciones:

• falso: se deshabilitará la edición de la columna correspondiente. Este es el valor predeterminado.
• verdadero: se habilitará la edición de la columna correspondiente.

Tenga en cuenta que si la columna no es editable, aún puede modificar su valor a través de la API pública expuesta por el IgcHierarchicalGridComponent.

La propiedad rowEditable le permite especificar las siguientes opciones:

• falso: se deshabilitará la edición de filas en la cuadrícula correspondiente. Este es el valor predeterminado.
• verdadero: se habilitará la edición de filas en la cuadrícula correspondiente.

En el caso de IgcHierarchicalGridComponent que la propiedad se establezca rowEditable en true y la editable propiedad no se defina explícitamente para ninguna columna, la edición se habilitará para todas las columnas excepto para la clave principal.

• Edición de celdas y por lotes: en este escenario, cada modificación de cada celda se conserva por separado y las operaciones de deshacer/rehacer están disponibles a nivel de celda;
• Edición de filas y por lotes: en este escenario, las modificaciones se conservan a nivel de fila, por lo que las operaciones de deshacer/rehacer no funcionarán para cada celda que se modifique, sino para el grupo de celdas de cada fila.

Editar plantillas

Si desea utilizar plantillas de edición específicas de un tipo de datos, debe especificar la propiedad dataType de la columna. Entonces veamos ahora cuáles son las plantillas predeterminadas para cada tipo:

• Para el tipo de datos string, la plantilla predeterminada utiliza IgcInputComponent.
• Para el tipo de datos number, la plantilla predeterminada utiliza IgcInputComponent tipo = "número", por lo que si intenta actualizar la celda a un valor que no se puede analizar como un número, su cambio se descartará y el valor en la celda será establecido en 0.
• Para el tipo de datos date, la plantilla predeterminada utiliza IgcDatePickerComponent
• Para el tipo de datos dateTime, la plantilla predeterminada utiliza DateTimeEditor. Este editor le dará instrucciones de máscara para los elementos de entrada que forman parte del objeto DateTime.
• Para el tipo de datos time, la plantilla predeterminada utiliza TimePicker.
• Para el tipo de datos boolean, la plantilla predeterminada utiliza IgcCheckboxComponent.
• Para el tipo de datos currency, la plantilla predeterminada utiliza InputGroup con configuración de prefijo/sufijo basada en la configuración regional de la aplicación o la cuadrícula.
• Para el tipo de datos percent, la plantilla predeterminada utiliza InputGroup con un elemento de sufijo que muestra una vista previa del valor editado en porcentajes.

Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

Argumentos y secuencia de eventos

La cuadrícula expone una amplia gama de eventos que brindan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de Edición de filas y Edición de celdas: al iniciar, confirmar o cancelar la acción de edición.

Evento	Descripción	Argumentos	Para interrumpir
RowEditEnter	SiRowEditing está habilitado, se activa cuando una fila ingresa al modo de edición	IgcGridEditEventArgs	verdadero
CellEditEnter	Se activa cuando una celda ingresa al modo de edición (después deRowEditEnter)	IgcGridEditEventArgs	verdadero
CellEdit	Si se cambia el valor, se activa justo antes de que se confirme el valor de una celda (por ejemplo, presionandoEnter)	IgcGridEditEventArgs	verdadero
CellEditDone	Si se cambia el valor, se activa después de que se haya editado una celda y se haya confirmado el valor de la celda.	IgcGridEditDoneEventArgs	FALSO
CellEditExit	Se activa cuando una celda sale del modo de edición	IgcGridEditDoneEventArgs	FALSO
RowEdit	SiRowEditing está habilitado, se activa justo antes de que se confirme el valor de una fila en el modo de edición (por ejemplo, al hacer clic en el botónDone en la superposición de edición de filas)	IgcGridEditEventArgs	verdadero
RowEditDone	SiRowEditing está habilitado, se activa después de que se haya editado una fila y se haya confirmado el valor de la nueva fila.	IgcGridEditDoneEventArgs	FALSO
RowEditExit	SiRowEditing está habilitado, se activa cuando una fila sale del modo de edición	IgcGridEditDoneEventArgs	FALSO

Cancelación de evento

• RowEditEnter- Ni Row​ ​Cell entrará en modo de edición.
• CellEditEnter: evita ingresar a la edición de celdas. Si rowEditable está habilitado, se activará la edición de filas, aunque la edición de celdas seguirá prohibida.
• CellEdit- Permitido Cell y/o Row editar, al presionar el botón Listo o Enter, no se confirmará la transacción de valor o fila. La edición de celdas y la edición de filas no se cerrarán hasta que se haga clic en el botón Cancelar.
• RowEdit: es posible confirmar la celda, pero no toda la fila. La fila permanecerá en modo de edición y la transacción de la fila se considerará abierta. Al presionar Listo no se confirma ni se cierra la fila. El botón Cancelar cierra el proceso de edición y la transacción sin confirmar los cambios.

El siguiente ejemplo demuestra la secuencia de ejecución de edición en acción:

EXAMPLE

TS

HTML

CSS

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcRowSelectionEventArgs, IgcGridEditEventArgs, IgcGridEditDoneEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        this.webHierarchicalGridRendered = this.webHierarchicalGridRendered.bind(this);
        this.webHierarchicalGridRowEditEnter = this.webHierarchicalGridRowEditEnter.bind(this);
        this.webHierarchicalGridRowEdit = this.webHierarchicalGridRowEdit.bind(this);
        this.webHierarchicalGridRowEditDone = this.webHierarchicalGridRowEditDone.bind(this);
        this.webHierarchicalGridRowEditExit = this.webHierarchicalGridRowEditExit.bind(this);
        this.webHierarchicalGridCellEditEnter = this.webHierarchicalGridCellEditEnter.bind(this);
        this.webHierarchicalGridCellEdit = this.webHierarchicalGridCellEdit.bind(this);
        this.webHierarchicalGridCellEditExit = this.webHierarchicalGridCellEditExit.bind(this);
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;
        this.webRowIslandGridRowEditEnter = this.webRowIslandGridRowEditEnter.bind(this);
        this.webRowIslandGridRowEdit = this.webRowIslandGridRowEdit.bind(this);
        this.webRowIslandGridRowEditDone = this.webRowIslandGridRowEditDone.bind(this);
        this.webRowIslandGridRowEditExit = this.webRowIslandGridRowEditExit.bind(this);
        this.webRowIslandGridCellEditEnter = this.webRowIslandGridCellEditEnter.bind(this);
        this.webRowIslandGridCellEdit = this.webRowIslandGridCellEdit.bind(this);
        this.webRowIslandGridCellEditExit = this.webRowIslandGridCellEditExit.bind(this);

        this._bind = () => {
            hierarchicalGrid.data = this.singersData;
            hierarchicalGrid.addEventListener("rendered", this.webHierarchicalGridRendered);
            hierarchicalGrid.addEventListener("rowEditEnter", this.webHierarchicalGridRowEditEnter);
            hierarchicalGrid.addEventListener("rowEdit", this.webHierarchicalGridRowEdit);
            hierarchicalGrid.addEventListener("rowEditDone", this.webHierarchicalGridRowEditDone);
            hierarchicalGrid.addEventListener("rowEditExit", this.webHierarchicalGridRowEditExit);
            hierarchicalGrid.addEventListener("cellEditEnter", this.webHierarchicalGridCellEditEnter);
            hierarchicalGrid.addEventListener("cellEdit", this.webHierarchicalGridCellEdit);
            hierarchicalGrid.addEventListener("cellEditExit", this.webHierarchicalGridCellEditExit);
            rowIsland.addEventListener("rowEditEnter", this.webRowIslandGridRowEditEnter);
            rowIsland.addEventListener("rowEdit", this.webRowIslandGridRowEdit);
            rowIsland.addEventListener("rowEditDone", this.webRowIslandGridRowEditDone);
            rowIsland.addEventListener("rowEditExit", this.webRowIslandGridRowEditExit);
            rowIsland.addEventListener("cellEditEnter", this.webRowIslandGridCellEditEnter);
            rowIsland.addEventListener("cellEdit", this.webRowIslandGridCellEdit);
            rowIsland.addEventListener("cellEditExit", this.webRowIslandGridCellEditExit);
        }
        this._bind();
    }

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

    public webHierarchicalGridRendered(args:any): void {
        const hierarchicalGrid = document.getElementById("hierarchicalGrid");
        hierarchicalGrid.parentElement.style.display = "flex";
        const container = document.createElement("div");
        container.id = "container";
        container.style.height = "80vh";
        container.style.width = "100%";
        container.style.overflow = "auto";
        hierarchicalGrid.parentElement.appendChild(container);
        const title = document.createElement("span");
        title.textContent = "Events execution sequence:";
        container.appendChild(title);
    }

    public webHierarchicalGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEdit'`;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditDone'`;
        container.appendChild(message);
    }

    public webHierarchicalGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'rowEditExit'  << End of cycle >>`;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webHierarchicalGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Hierarchical Grid => 'cellEditExit'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditEnter' with 'RowID':` + args.detail.rowID;
        container.appendChild(message);
    }

    public webRowIslandGridRowEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEdit'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditDone(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditDone'`;
        container.appendChild(message);
    }

    public webRowIslandGridRowEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'rowEditExit'  << End of cycle >>`;
        container.appendChild(message);
    }

    public webRowIslandGridCellEditEnter(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEditEnter' with 'value':` + args.detail.oldValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webRowIslandGridCellEdit(args: CustomEvent<IgcGridEditEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEdit' with 'newValue':` + args.detail.newValue, args.detail.cancel;
        container.appendChild(message);
    }

    public webRowIslandGridCellEditExit(args: CustomEvent<IgcGridEditDoneEventArgs>): void {
        let container = document.getElementById("container");
        const message = document.createElement("p");
        message.textContent = `Row Island => 'cellEditExit'`;
        container.appendChild(message);
    }

}

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="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid"
        row-editable="true">
            <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">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland"
            primary-key="Album"
            row-editable="true">
                <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コピー

Edit in: Codesandbox

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

Integración de características

Mientras una celda/fila está en modo de edición, un usuario puede interactuar con la cuadrícula de muchas maneras. La siguiente tabla especifica cómo una determinada interacción afecta la edición actual:

Cuadrícula jerárquica	Filtración	Clasificación	Paginación	Moviente	Fijar	Ocultación	Agrupar por	Cambiar el tamaño	Escapar	Ingresar	F2	Pestaña	Clic en la celda	Agregar nueva fila/Eliminar/Editar
Mantener el modo de edición								✔
Salir del modo de edición	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
Comprometerse										✔	✔	✔	✔	✔
Desechar	✔	✔	✔	✔	✔	✔	✔		✔

Como se ve en la tabla, todas las interacciones, excepto cambiar el tamaño de una columna, finalizarán la edición y descartarán los nuevos valores. En caso de que se confirme el nuevo valor, el desarrollador puede hacerlo en el evento "-ing" de característica correspondiente.

Ejemplo de cómo confirmar nuevos valores, si el usuario intenta ordenar la columna mientras una celda/fila está en modo de edición:

<igc-hierarchical-grid id="grid" primary-key="ProductID" >
</igc-hierarchical-grid>
html

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.endEdit(true);
}
typescript

Referencias de API

• IgcHierarchicalGridComponent

Recursos adicionales

• Tipos de datos de columna
• Virtualización y rendimiento
• Paginación
• Filtración
• Clasificación
• resúmenes
• Fijación de columnas
• Cambio de tamaño de columna
• Selección