How to Create Inline Cell Editor in TreeGrid

IntegralUI TreeGrid 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.

Add Root Add Child
TreeGrid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

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.

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 TreeGrid 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

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

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 treegrid is in edit or normal mode a different set of action buttons appear.

Related: Add Rows Dynamically in TreeGrid

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.

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:

Conclusion

Using built-in editors from TreeGrid 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.

The TreeGrid is a native Web Component, part of IntegralUI Web. here you will find sample code that you can use in Angular, React, Vue and any other JavaScript framework.