The online Document Editor of TX Text Control .NET Server for ASP.NET 31.0 will implement a fully customizable context menu. The context menu contents can be accessed through a new contextMenuOpening event that allows you to change the items before the menu is rendered.

The following screenshot shows the default context menu for a text selection with an additional custom item:

Customizable Context Menu

Context menu items can be added, removed and modified including the connected click handler. The Location property gives information about the context of the menu and informs whether the input position is a text selection or over a table, image or a header.

Modify Items before Rendering

The event provides access to the items before the menu is rendered. That implies that you can modify the array in the event to add or remove elements. The following code is removing the Cut, Copy and Paste clipboard entries from the default text selection array:

TXTextControl.addEventListener("contextMenuOpening", function (menu) {
menu.items.splice(0,4);
})
view raw test.js hosted with ❤ by GitHub

The event arguments of the contextMenuOpening event provide access to the item array, the location of the context menu and an option to cancel the context menu completely.

ContextMenuEventArgs Object

Property Description
cancel Set this to true to suppress the context menu.
items Context menu items (ContextMenuItem object).
location A binary combination of ContextMenuLocation values.

ContextMenuItem Object

Property Description
clickHandler Optional. The custom menu item's click handler callback function.
dropDownIsScrollable Optional. Set this to true if the item's child menu should be scrollable.
imageUrl Optional. The menu item's icon image URL.
isChecked Optional. Specifies whether the menu item has a check mark symbol in front of it.
isEnabled Optional. Specifies whether the menu item is enabled or not.
items Optional. The child menu items.
text The menu item text.

ContextMenuLocation Enumeration

Value Member Description
1 TextSelection The menu context is a text selection.
2 TextInputPosition The menu context is the text input position.
4 Header The menu context is the top page margin which contains a header.
8 NoHeader The menu context is the top page margin which contains no header.
16 Footer The menu context is the bottom page margin which contains a footer.
32 NoFooter The menu context is the bottom page margin which contains no footer.
64 PageMargin The menu context is the top or the bottom page margin.
128 PageNumberField The menu context is a page number field.
256 SelectedFrame The menu context is a selected frame (text frame, image, chart or barcode).
512 Table The menu context is a text selection or a text input position in a table.
1024 TextField The menu context is a text selection or a text input position in a text field.
2048 MisspelledWord The menu context is a text selection or a text input position in a misspelled word.
4096 TableOfContents The menu context is a text selection or a text input position in a table of contents.
8192 TrackedChange The menu context is a text selection or a text input position in a tracked change.
16384 Comment The menu context is a text selection or a text input position in a comment.

Adding Items

The following code shows how to add a custom menu item to the opened context menu including a separator:

TXTextControl.addEventListener("ribbonTabsLoaded", function () {
addCustomContextMenu();
});
function addCustomContextMenu() {
let myMenuItem =
{
"__id": "myMenuItem",
"isChecked": false,
"isEnabled": true,
"text": "",
"imageUrl": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRjAwRkY7fQ0KCS5zdDF7ZmlsbDojOUIwMEZGO30NCjwvc3R5bGU+DQo8Zz4NCgk8cmVjdCB4PSIxLjUiIHk9IjEuNSIgY2xhc3M9InN0MCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIi8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE0LDJ2MTJIMlYySDE0IE0xNSwxSDF2MTRoMTRWMUwxNSwxeiIvPg0KPC9nPg0KPC9zdmc+DQo=",
"dropDownIsScrollable": false,
"items": [],
"clickHandler": ClickMe
};
let mySeparator =
{
"__id": "mySeparator",
"isChecked": false,
"isEnabled": true,
"text": "",
"imageUrl": "",
"dropDownIsScrollable": false,
"items": [],
};
TXTextControl.addEventListener("contextMenuOpening", function (menu) {
myMenuItem.text = "Custom Context Menu Item. Location: " + menu.location;
menu.items.push(mySeparator);
menu.items.push(myMenuItem);
})
function ClickMe() {
alert("Custom Click Event");
}
}
view raw test.js hosted with ❤ by GitHub

The clickHandler simply receives a function name to call when the item has been clicked. Additionally, the sample code displays the location in the menu item text for demo purposes. In the following screenshot, the context menu is opened over a TextSelection (1) in a Table (512) (=513).

Customizable Context Menu

Stay tuned for more features of TX Text Control 31.0!