TabControl.EnableEdit

Syntax

EnableEdit: Boolean;

Description

The EnableEdit property determines whether tab headers can be edited.

Comments

Available values:

true. Tab headers can be edited.
false. Default value. Tab headers cannot be edited.

To switch to the edit mode, double-click the header.

To exit the edit mode, click on the space outside the edited header.

Example

Executing the example requires that the page contains the TabControl component named tabcontrol (see Example of Creating the TabControl Component). Enable editing and add handlers for the TabEdited, TabEditing and TabTextEdited events:

tabcontrol.setEnableEdit(true)
tabcontrol.TabEdited.add(function ()
{
   tabcontrol.showContent()
})
tabcontrol.TabEditing.add(function ()
{
   tabcontrol.hideContent()
})
tabcontrol.TabTextEdited.add(function (sender, args)
{
   console.log("Index: " + args.TabIndex + "; Header: " + args.Caption)
})

After executing the example, tab headers can be edited. Switch to edit mode. While the header is in edit mode, the tab content is hidden. After quitting the edit mode the tab contents appears. If the header text is changed before quitting the edit mode, tab index and its modified header are displayed to the browser console.