Your search did not match any results.
Tab Panel

Tab Drag & Drop

This demo shows how to allow users to reorder, add, and remove tabs in a TabPanel widget.

Reorder items
Wrap the TabPanel into the Sortable widget and set the following options:

  • filter
    Specify a CSS selector to indicate draggable items. This demo sets the filter to .dx-tab.

  • itemOrientation
    Set this options to "horizontal". When a user drags a tab, the remaining items move left and right to indicate the drop target.

  • onReorder
    Implement this handler to synchronize the dataSource with the reordered tabs.

  • moveItemOnDrop
    Set this option to true to update the markup after a tab is dropped.

Add or remove tabs
This demo adds and removes tabs in the following two functions:

  • addButtonHandler - a click handler for the "Add Tab" button.
  • closeButtonHandler - a click handler for a tab's Close icon. The demo uses the itemTitleTemplate option to display this icon.

Both handlers modify the TabPanel's dataSource.

The source code for the React version of this demo will be available soon.