Form Editing in Grid Component

One way to edit grid data is using a Form. Whenever a row enters in edit mode, a resizable form will appear on the grid right side showing all editable cells with a corresponding editor based on column editor type. There are several editors that can appear in the Form: CheckBox, Date, DropDownList, Numeric, Progress, Rating, Slider and Text.

In this article, you will learn how to activate the Form editing mode, set an editor for cells based on their data type and how to handle grid data changes by handling events. A sample code below shows how to use a Form to edit grid cells is available in JavaScript, Angular, React and Vue.

To activate the form editing mode hover over cell in first column and click on Pencil icon to start editing mode. A Form is a vertical list of all editable cells for selected row, where each cell value is shown using a specific editor, based on column editor type.

When Form Editing mode is activated, a form will appear on right side of the grid where you can:

• make changes to cell value using editors
• save or cancel any changes using buttons at the end of the Form

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Editing Grid Cells with Form

In case of form editing, you need to set the editMode property of the grid to Form. Whenever a row is selected for editing and form will slide in from the right side of the grid. The form is a vertical list automatically generated from different kind of editors for each editable cell in the row.

Related: Different Editing Modes in Grid Component

To determine what kind of editor is used in the Form for specific cell, you need to set it up in columns by specifying the editorType. Here is an example:

• JavaScript
• Angular
• React
• Vue

How to Activate Form Editing in Grid

There are two ways to active the form editing mode:

• hovering over cells in first column will show a grayed pencil icon, to activate edit mode click on pencil icon
• manually from code by calling the beginEdit method

In both cases with form editing, you can edit only one row at time. If you click on pencil button in a different row, changes to previous editing row are cancelled and the form resets showing cell values from the newly selected row.

A row is in editing mode when pencil icon is fully shown and Form is visible, stating that you can edit cell values for that row using editors in the Form. Depending on the cell editor selected (previously by specifying the column editor type), you can change the cell value using the editor. For example, to edit dates with DatePicker:

• with mouse left-click on the editor a dropdown Calendar will appear from where you can choose another date, or
• with keyboard, by pressing 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.

Once you are finished with editing, you can click the Save button at the end of the Form. This will confirm any changes and save the row in the grid with new cell values. If you click on Cancel button within the Form, all changes to the row are cancelled. In both ways, the form will be closed and pencil icon will disappear from the first cell in editing row, representing that row is back in non-editable normal state.

You can also start or end editing from code by calling the beginEdit and endEdit methods. The beginEdit method will start the editing process for specified row, while calling the endEdit can save or cancel any changes to the grid row.

For example, to show the Form and start editing when row is double-clicked you can use this code:

• JavaScript
• Angular
• React
• Vue

How to Handle Grid Data Changes from the Form

When using the Grid Form for editing any changes to the row cells are not applied until the Save button is clicked or endEdit method is called. Saving the data is accompanied with two events:

• dataChanging - occurs before data changes to specified row are confirmed
• dataChanged - occurs after data changes are confirmed

Both events carry the row object that is currently edited with its original and new cell values. With one addition for dataChanging event, it also contains a cancel field that you can use to cancel the editing process from the code.

Using these events, you can review any changes to the row and cancel or proceed with saving. Like in this example, handling these events updates the Total value, based on changes to Quantity and Price values:

• JavaScript
• Angular
• React
• Vue

Conclusion

Form editing in Grid component allows you to edit rows one by one using a Form, which is automatically generated list of editors for all editable cells for specified row. Editors that are shown in the Form are selected based on specified column editor type, for each column separately. To activate editing, you can use mouse/touch 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 the content of the editing Form and handle events that accompanies the editing process. The Grid is a native Web Component, part of IntegralUI Web that you can use to develop web applications in any JavaScript framework.