Web Components Grid Row Editing

The Ignite UI for Web Components Row Editing feature in Web Components Grid allows editing data directly within the IgcGridComponent. 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 Grid Row Editing Example

The following sample demonstrates how to enable row editing in the IgcGridComponent. 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 IgcGridComponent with bound data source and rowEditable set to true:

<igc-grid id="grid" primary-key="ProductID" width="100%" height="500px" row-editable="true">
    <igc-column field="ProductID" header="Product ID" editable="false"></igc-column>
    <igc-column field="ReorderLevel" header="Reorder Level" data-type="number"></igc-column>
    <igc-column field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="unitsInStock" field="UnitsInStock" header="Units In Stock" data-type="number"></igc-column>
    <igc-column field="OrderDate" field="Order Date" data-type="date"></igc-column>
    <igc-column field="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

constructor() {
    var grid  = document.getElementById('grid') as IgcGridComponent;
    var unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
    grid.data = this.data;
    unitsInStock.bodyTemplate = this.unitsInStockCellTemplate;
}

public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<input name="units" value="${ctx.cell.value}" style="color: black" />`;
}

[!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 IgcGridComponent, 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 IgcGridComponent utilizes BaseTransactionService - an internal provider that holds pending cell changes until the row state is either submitted or cancelled.

Positioning

Default position of the overlay will be below the row that is in edit mode
If there is no space below the row then overlay will appear above the row.
Once shown - top or bottom, overlay will maintain this position during scrolling, until the overlay is closed.

Behavior

If row is in edit mode, then editing will continue, if a cell from the same row is clicked.
Clicking "Done" button will finish row editing and will submit changes either to the data source, or to a transaction if available. In addition row will exit edit mode.
Clicking "Cancel" button will revert all current changes in the row and row will exit edit mode.
If row is in edit mode, then clicking a cell from another row will finish the current row edit and will submit new row changes (the same behavior clicking "Done" button). If the new cell that gets focus is editable, then the new row also enters edit mode, while if the cell is not editable, then only the previous row exits edit mode.
If row is in edit mode and IgcGridComponent is scrolled so that row goes outside the visible area, the latter will be still in edit mode. When IgcGridComponent is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside the IgcGridComponent, the cell will also stay in edit mode.
When perform sorting, filtering, searching and hiding operations, will revert all current changes in the row and row will exit edit mode.
When perform paging, resizing, pinning and moving operations, will exit edit mode and will submit latest value.
Each modified cell gets edited style until row edit is finished. This is the behavior, when IgcGridComponent is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed.

Enter and F2 enters row edit mode
Esc exits row edit mode and doesn't submit any of the cell changes, made while the row was in edit mode.
Tab move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row.

Feature Integration

Any data changing operation will terminate row editing operations and will submit current row changes. This will include operations like sorting, changing grouping and filtering criteria, paging, etc.
Summaries will be updated after row edit is finished. Same is valid for the other features like sorting, filtering, etc.

Expanding and collapsing grouped rows will not terminate editing for the current row.

Customizing Row Editing Overlay

Customizing Text

Customizing the text of the row editing overlay is possible using via templating.

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

Customizing the buttons of the row editing overlay also possible via templating.

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

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

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

Then set the related CSS properties for that class:

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

Row Selection
Row Expand/collapse
Row Editing
Row Pinning

API References

rowEditable
RowEditEnter
RowEdit
RowEditDone
endEdit
field
editable
primaryKey
IgcGridComponent

Additional Resources

Our community is active and always welcoming to new ideas.

Web Components Grid Row Editing