Contextual toolbars are very helpful to provide users quick access to the most common functions and settings. A smart implementation helps to increase the productivity and user experience. This article shows how to implement a contextual toolbar to manipulate form fields in a document.
The following screen video shows the sample implementation of a contextual toolbar to select all text and to remove text from a form field:
See this demo implementation in our live demos. We added this contextual toolbar to one of the live samples.
The contextual toolbar can be any DIV element you design in your page or a partial view:
In case the user enters a form field, the textFieldEntered event is fired:
In the event handler, the context menu is shown (using the drawContextMenu method) in case the field is an editable form field:
The drawContextMenu function positions the context menu under the selected form field and shows it by changing the display CSS property:
The full implementation can be found in the demo project on GitHub.