Edit Grid Cells in Place in Tree Grid

IntegralUI Tree Grid component includes several built-in editors that you can use to create your own inline editor for editing cell values in specific row. To create an inline editor you only need to specify the editor type in columns, where you can select from available editors or add your own custom editor.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to create inline editor for grid cells in same row.

In this example, you can add root and child rows where when a new row is created automatically enters the edit mode and an inline cell editor will appear. Depending on cell value type set from column, when cell has the input focus a different editor will appear. It can be a text editor, numeric editor or a rating component.

The last column contains action buttons from where you can confirm or cancel changes to cell values.

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

How to Create Inline Cell Editor

By default, each grid cell displays a text value. Using editors or by modifying the cell template, you can add custom HTML elements or other web components arranged in custom layouts, independently for each cell.

In case of text editor, the cell template should include an input element and a label. The input element will appear only when cell is in edit mode, otherwise the cell label is shown.

To keep it simple, all cells can have a text editor, but you can add any custom component for editing, like numeric text box, combo box, date time picker, checkbox, rating etc.

To create an inline editor for row cells, you can use Tree Grid built-in editors (like in this example), or create your own, by changing the cell template. In this case, we have the following columns:

• Title - uses a text editor to edit cell values
• Year - uses a numeric editor
• Rating - uses rating component to change the current rating
• Action Buttons - a pair of Edit/Remove and Save/Cancel buttons for editing and removing

• JavaScript
• Angular
• React
• Vue

Based on editorType property value in columns, a different editor component will appear whenever a cell has the input focus.

The editors will appear only when cell is in edit mode, which happens when row has the editorVisible property set to true. In edit mode, if you press ESCAPE key the editing is cancelled. This also closes the editors and returns the grid to the default state.

During editing, in order to handle keyboard actions, you need to handle the keyDown event for the grid. In this example, you only need to handle actions from these keys:

• TAB - moves focus to a the next or previous cell if SHIFT key is pressed
• ENTER - accepts changes from editors and saves the row, also activates the edit mode if not active
• ESCAPE - cancels the editing and deactivates the edit mode without any saving

• JavaScript
• Angular
• React
• Vue

You can customize the editing process by handling other keys and change the way editing will take place.

Once you are finished with editing, you can press ENTER or the Save button in the last column. This will confirm any changes and save the row in the grid with new cell values.

How to Add Edit/Remove and Other Action Buttons to Grid Cells

You can add action buttons in cells of the last column that when clicked will confirm or cancel the edit process. Depending on whether the tree grid is in edit or normal mode a different set of action buttons appear.

Related: Add Rows Dynamically in Tree Grid

In normal mode, the cells in last column show an Edit and Remove button. When edit mode is activated, the last column will show Save and Cancel button. To set these two different states, the template of these cells includes a condition that determines which action buttons are visible.

• JavaScript
• Angular
• React
• Vue

Within cell templates, you can customize these buttons, so instead of showing text, you can use custom icons that will represent the corresponding action: edit, remove, save or cancel.

In above code, if the row is currently editing it will show 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:

• JavaScript
• Angular
• React
• Vue

Conclusion

Using built-in editors from Tree Grid component, you can create custom inline cell editor. You only need to specify editor type for each column. Whenever a cell is in edit mode, the specified editor will appear from where you can edit the cell value. In addition, you can also modify cell content using templates and add action buttons from where you can save or cancel any changes to cell values.

Tree Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.