React Grid Row Editing
The Ignite UI for React Row Editing feature in React Grid allows editing data directly within the IgrGrid
. 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.
React Grid Row Editing Example
The following sample demonstrates how to enable row editing in the IgrGrid
. 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 IgrGrid
with bound data source and rowEditable
set to true:
function unitsInStockCellTemplate(ctx: IgrCellTemplateContext) {
return (
<>
<input name="units" value={ctx.dataContext.cell.value} style={{color: "black"}} />;
</>
);
}
<IgrGrid primaryKey="ProductID" width="100%" height="500px" rowEditable="true"
bodyTemplate={unitsInStockCellTemplate}>
<IgrColumn field="ProductID" header="Product ID" editable="false"></IgrColumn>
<IgrColumn field="ReorderLevel" header="ReorderLever" dataType="number"></IgrColumn>
<IgrColumn field="ProductName" header="ProductName" dataType="string"></IgrColumn>
<IgrColumn field="UnitsInStock" header="UnitsInStock" dataType="number"></IgrColumn>
<IgrColumn field="OrderDate" dataType="date"></IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="boolean"></IgrColumn>
</IgrGrid>
[!Note] Setting primary key is mandatory for row editing operations.
[!Note] Enabling editing for individual columns is not necessary. Using the
rowEditable
property in theIgrGrid
, all rows, with definedfield
property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set theeditable
input of that column tofalse
.
[!Note] The
IgrGrid
utilizesBaseTransactionService
- 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
IgrGrid
is scrolled so that row goes outside the visible area, the latter will be still in edit mode. WhenIgrGrid
is scrolled, so that the row is visible again, the row will be still in edit mode. When clicked outside theIgrGrid
, 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
IgrGrid
is not provided with transactions. When transactions are available - then cell edit style is applied until all the changes are committed.
Keyboard Navigation
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.
function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
return (
<>
Changes: {ctx.dataContext.implicit}
</>
);
}
Customizing Buttons
Customizing the buttons of the row editing overlay also possible via templating.
function rowEditActionsTemplate(ctx: IgrGridRowEditActionsTemplateContext) {
const endRowEdit = ctx.dataContext.implicit;
return (
<>
<button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
<button onClick={(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:
<IgrGrid className="grid"></IgrGrid>
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
IgrGrid
Additional Resources
Our community is active and always welcoming to new ideas.