How to Use Text Editor in Grid Cells

In most cases, the grid cells that have a text or label are non-editable. If you need to edit the cell label you can use the built-in Text Editor, which is part of the Grid component and you can use it in Angular, React and Vue. In this article, you will learn how to work with built-in text editor and how to customize it via CSS.

In above demo, cells in Company column are editable. When you click on the cell, a textbox will popup where you can enter a new string. Cell value is changed when you press the ENTER key or move the input focus to another cell. If you click outside the cell or press the ESCAPE key, the editor will close and the change is cancelled.

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

How to Enable the Text Editor in Grid Cells

By default, grid component displays text in all cells. To enable the editing of cell text or label, you need to set the editorType of specific column to Text. This allows you to enter new text for cells during run-time.

• JavaScript
• Angular
• React
• Vue

By setting the editorType, all cells in specified column will display values based on the chosen editor. If you want to display a different content in the grid cell, don't specify the editor, instead use the cell template.

Related: Different Editing Modes in Grid Component

To modify the behavior of the text editor, you can use the editorSettings field of column object, which accepts the following settings:

• allowChange - when set to 'lost-focus', text from editor is applied to the cell value when editor loses the input focus
• editOnFocus - shows the editor when cell is focused
• selected - when true selects the whole text in the editor, doesn't work if type is 'numeric'
• type - specifies whether text editor is text or numeric only
• visible - determines when editor becomes visible: always, click, hover or none

Once the editor is set to Text, you can activate it by clicking inside the grid cell or when cell is focused. A text box will popup and you can enter a new text. To confirm the change, press ENTER, to cancel it press ESCAPE key. The change is also cancelled if you click outside the cell space.

How to Handle Grid Data Changes by the Text Editor

When a new string is entered in the text editor and the change is confirmed, the cell value field changes to the new text. When this happens, the valueChanged event is fired. The event data includes the cell object and the new value.

You can handle this event in your code and add custom actions, like updating the server data with a new value for specified cell.

• JavaScript
• Angular
• React
• Vue

Customize the Appearance of Text Editor

The text editor is actually an input element where its appearance is determined by a single CSS class. By modifying the iui-editor-text class, you can alter the text editor appearance.

You cannot modify this class directly, because the Grid is a web component. Instead, you can create your own CSS style, make changes to iui-editor-text class and apply this style to teh Grid through customStyle property. This will override default appearance of the text editor.

For example, let's say that when text editor appears, you want to have a text in a larger font size with selection in light green color. You can also set text editor to occupy the whole cell space by modifying margin and padding attributes:

• JavaScript
• Angular
• React
• Vue

Conclusion

To edit the cell text in IntegralUI Grid component for Angular, React and Vue, you can enable editing by selecting a text editor for specific grid column. Whenever a cell is clicked, the text editor will popup where you can enter a new value. Any changes to the cell value are accompanied with events that you can handle in your code. In addition, using CSS you can modify the editor appearance.

IntegralUI Web is an UI library of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.