Inline Editing in Grid Component
With inline editing you can select and edit a specific row using built-in editors depending on column data type. There are different kinds of editors available that you can choose from: CheckBox, Date, DropDownList, Numeric, Progress, Rating, Slider and Text.
In this article, you will learn how to activate the Inline editing mode, select an editor for cells based on their data type and how to handle cell value changes by handling events. A sample code below written in JavaScript, Angular, React and Vue shows how to edit cells in single row in the grid.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
To activate the inline editing mode hover over cell in first column and click on Pencil icon to start editing mode or press ENTER when cell is focused. Another way to start editing is by clicking on Edit button in the last column.
When Inline Editing mode is activated, you can:
- make changes to cell value using editors when cell is focused
- delete a row using the Remove button in the last column
- save or cancel any changes using buttons in the last column
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
Grid Inline Cell Editor
There are different ways to edit cells in Grid component. In case of inline editing, you need to set the editMode property of the grid to Inline. This will change the grid layout so that a fixed column on left will appear as first column, which will show a pencil icon when column cell is hovered. In addition, a new column will appear fixed on right showing command buttons from where you can edit, remove, save or cancel any changes.
Here is an example of editor settings in grid columns that will show a specific editor in cells when inline editing is active:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
How to Activate Inline Editing
There are few ways to active the inline editing mode:
- hovering over cells in first column will show a grayed pencil icon, to activate edit mode click on pencil icon
- when cell has the input focus, press ENTER
- click on the Edit button in the last column
- manually from code by calling the beginEdit method
In all cases with inline editing, you can edit only one row at time. If you switch the input focus to a cell in different row and press ENTER, or click on pencil button in a different row, changes to previous editing row are cancelled and the inline editing resets and starts from first cell in the newly selected row.
A row is in editing mode when pencil icon is fully shown, stating that you can edit cell values for that row using editors when cell is focused. Depending on the editor type, you can change cell value using a mouse or keyboard. For example, to edit dates:
- with mouse clicking on a cell with a date will show a dropdown Calendar from where you can choose another date, or
- using a keyboard, with Left/Right arrow keys you can change dates by day. In addition, holding the SHIFT key will change a date by 30 days
Clicking the Pencil icon on a different row than the one edited, will cancel any changes not saved. Clicking again on the Pencil icon, will close the editor.
When a row is editing it will show in last column Save/Cancel buttons, otherwise it will show Edit/Remove buttons. Only one row is editable at one time, all other rows remain in normal state. Clicking these buttons will execute the following actions:
- Edit - activates the inline editing for the row and sets the focus to the first cell
- Remove - removes the row from the grid
- Save - confirms any changes to the row and ends editing
- Cancel - cancels any changes to the row and ends editing
Once you are finished with editing, you can click the Save button in the last column. This will confirm any changes and save the row in the grid with new cell values. You can also end editing from code by calling the
How to Change the Button Text in Different Language
By default, the text of command buttons used during editing are in English. In inline editing there are four buttons in use: Edit, Remove, Save and Cancel.
If you need to show the text of these buttons in different language, you can use data binding. The grid dataFields property accepts localization of names used during editing. You can replace these names with custom ones. For example, to set the text of these buttons in German you can use something like this:
How to Handle Cell Value Changes in Grid
Any change to cell values during editing fires the valueChanging and valueChanged events, which you can handle in your code. Like in this example, handling these events updates the Total value, based on changes to Quantity and Price values.
When changes are saved by clicking on the Save button or manually from code by calling the endEdit method, the dataChanging and dataChanged events are fired. These events carry the editing row object with its original and new cell values. By handling these events, you can review any changes to the row and cancel or proceed with saving.
Conclusion
Inline editing in Grid component allows you to edit rows one by one using built-in editors. You can choose from several editors available to edit grid cells, depending on data type. To activate editing, you can use mouse/keyboard or manually from code. During editing, data changing events are fired, which you can handle in your code.
A sample code is available in JavaScript, Angular, React and Vue that shows you how to set up inline editing mode and handle events that accompanies the editing process. IntegralUI Web is a suite of native web components that includes the Grid.