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.
* Icons used in this sample are provided by icondrawer.com
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
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.
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.
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.
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.
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:
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.