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

La función de edición de Ignite UI for Web Components fila en Web Components cuadrícula jerárquica permite editar datos directamente dentro de la IgcHierarchicalGridComponent. Además de esta cómoda forma de manipular los datos, hay una potente API para operaciones CRUD completas. Puede realizar la edición de filas de cuadrícula haciendo clic en una fila y presionando la tecla Enter. Otra forma rápida es hacer doble clic con el ratón en la fila que hay que modificar.

Web Components Hierarchical Grid Row Editing Example

En el ejemplo siguiente se muestra cómo habilitar la edición de filas en el IgcHierarchicalGridComponent. Al cambiar el valor de una celda y, a continuación, hacer clic o desplazarse a otra celda de la misma fila, no se actualizará el valor de la fila hasta que se confirme mediante el botón Listo o se descarte mediante el botón Cancelar.

[!Note] When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode.

Row Editing Usage

Defina un origen de IgcHierarchicalGridComponent datos enlazado with y rowEditable establézcalo en true:

<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID" row-editable="true">
    <igc-column field="Artist" header="Artist" data-type="string"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image" editable="false"> </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" 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 child-data-key="Songs" auto-generate="false" primary-key="Number" row-editable="true">
            <igc-column field="Number" header="No." data-type="string"> </igc-column>
            <igc-column field="Title" header="Title" data-type="string"> </igc-column>
            <igc-column field="Released" header="Released" data-type="date"> </igc-column>
            <igc-column field="Genre" header="Genre" data-type="string"> </igc-column>
        </igc-row-island>
    </igc-row-island>

    <igc-row-island child-data-key="Tours" auto-generate="false" primary-key="Tour" row-editable="true">
        <igc-column field="Tour" header="Tour" data-type="string"> </igc-column>
        <igc-column field="StartedOn" header="Started on" data-type="string"> </igc-column>
        <igc-column field="Location" header="Location" data-type="string"> </igc-column>
        <igc-column field="Headliner" header="Headliner" data-type="string"> </igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

constructor() {
    var grid  = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    grid.data = this.data;
}

[!Note] Setting primary key is mandatory for row editing operations.

[!Note] Enabling editing for individual columns is not necessary. Using the rowEditable property in the IgcHierarchicalGridComponent, all rows, with defined field property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the editable input of that column to false.

[!Note] The IgcHierarchicalGridComponent utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

Positioning

La posición predeterminada de la superposición estará debajo de la fila que está en modo de edición.
Si no hay espacio debajo de la fila, aparecerá una superposición encima de la fila.
Una vez que se muestra, arriba o abajo, la superposición mantendrá esta posición durante el desplazamiento, hasta que se cierre la superposición.

Behavior

Si la fila está en modo de edición, la edición continuará si se hace clic en una celda de la misma fila.
Al hacer clic en el botón "Listo", finalizará la edición de la fila y enviará los cambios a la fuente de datos o a una transacción, si está disponible. Además, la fila saldrá del modo de edición.
Al hacer clic en el botón "Cancelar", se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.
Si la fila está en modo de edición, al hacer clic en una celda de otra fila finalizará la edición de la fila actual y se enviarán nuevos cambios en la fila (el mismo comportamiento al hacer clic en el botón "Listo"). Si la nueva celda que recibe el foco es editable, entonces la nueva fila también ingresa al modo de edición, mientras que si la celda no es editable, solo la fila anterior sale del modo de edición.
Si la fila está en modo de edición y IgcHierarchicalGridComponent se desplaza para que la fila quede fuera del área visible, esta última seguirá en modo de edición. Cuando IgcHierarchicalGridComponent se desplaza, de modo que la fila vuelva a ser visible, la fila seguirá en modo de edición. Cuando se hace clic fuera de la IgcHierarchicalGridComponent, la celda también permanecerá en modo de edición.
Al realizar operaciones de clasificación, filtrado, búsqueda y ocultación, se revertirán todos los cambios actuales en la fila y la fila saldrá del modo de edición.
Al realizar operaciones de paginación, cambio de tamaño, fijación y movimiento, saldrá del modo de edición y enviará el último valor.
Cada celda modificada recibe un estilo de edición hasta que finaliza la edición de fila. Este es el comportamiento, cuando IgcHierarchicalGridComponent no se proporciona con las transacciones. Cuando las transacciones están disponibles, se aplica el estilo de edición de celda hasta que se confirman todos los cambios.

Ingrese y F2 ingresa al modo de edición de filas
Esc sale del modo de edición de filas y no envía ninguno de los cambios de celda realizados mientras la fila estaba en modo de edición.
Tab mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.

Feature Integration

Cualquier operación de cambio de datos finalizará las operaciones de edición de filas y enviará los cambios de filas actuales. Esto incluirá operaciones como ordenar, cambiar criterios de agrupación y filtrado, paginación, etc.
Los resúmenes se actualizarán una vez finalizada la edición de la fila. Lo mismo es válido para otras funciones como ordenar, filtrar, etc.

Customizing Row Editing Overlay

Customizing Text

Es posible personalizar el texto de la superposición de edición de filas mediante plantillas.

La propiedad RowChangesCount está expuesta y contiene el recuento de celdas modificadas.

public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
    return html`Changes: ${ctx.implicit}`;
}

Customizing Buttons

También es posible personalizar los botones de la superposición de edición de filas mediante plantillas.

public rowEditActionsTemplate = (ctx: IgcGridRowEditActionsTemplateContext) => {
    const endRowEdit = ctx.implicit;
    return html`
        <button @click="${(event) => endRowEdit(false, event)}">Cancel</button>
        <button @click="${(event) => endRowEdit(true, event)}">Apply</button>
    `;
}

Styling

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

Luego configure las propiedades CSS relacionadas para esa clase:

.grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}

Demo

Known Issues and Limitations

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

API References

Additional Resources

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