Web Components Edición de filas de cuadrícula de árbol

    The Ignite UI for Web Components Row Editing feature in Web Components Tree Grid allows editing data directly within the IgcTreeGridComponent. On top of this convenient way to manipulate data, there’s a powerful API for full CRUD operations. You can perform grid row editing by clicking on a row and pressing Enter key. Another quick way is to double click with the mouse on the row that needs to be modified.

    Web Components Tree Grid Row Editing Example

    The following sample demonstrates how to enable row editing in the IgcTreeGridComponent. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the Done button, or discarded by using Cancel button.

    [!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

    Define a IgcTreeGridComponent with bound data source and RowEditable set to true:

    <igc-tree-grid id="grid" primary-key="ID" width="100%" height="500px" row-editable="true">
    <igc-column field="Name" header="Name" data-type="string"></igc-column>
    <igc-column field="Age" header="Age" data-type="number"></igc-column>
    <igc-column field="Title" header="Title" data-type="string"></igc-column>
    <igc-column field="HireDate" field="Hire Date" data-type="date"></igc-column>
</igc-tree-grid>

    constructor() {
    var grid  = document.getElementById('grid') as IgcTreeGridComponent;
    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 IgcTreeGridComponent, 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 IgcTreeGridComponent 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.

    • If row is in edit mode and IgcTreeGridComponent is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When IgcTreeGridComponent is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the IgcTreeGridComponent, the cell will also stay in edit mode.

    • Al realizar operaciones de ordenación, filtrado, búsqueda y ocultación, todos los cambios actuales en la fila se revierten y la fila sale del modo de edición.

    • Al realizar operaciones de paginación, redimensionamiento, fijación y movimiento, sale del modo de edición y envía el valor más reciente.

    • Each modified cell gets edited style until row edit is finished. This is the behavior, when IgcTreeGridComponent is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed.

    Keyboard Navigation

    • ENTER y F2 entra en modo de edición de filas

    • ESC Sale del modo de edición de fila 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.

    The RowChangesCount property is exposed and it holds the count of the changed cells.

    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-tree-grid class="grid"></igc-tree-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

    • When the grid has no PrimaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

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