A newer version of this page is available. Switch to the current version.

Tab Container

  • 5 minutes to read

The Tab container dashboard item allows you to split the dashboard layout into several pages. You can switch tabs in UI or in code and use a timer for visual effects. Common filter controls for large elements in a dashboard can be located on a separate tab page.


To create a tab container, use the Tab Container button in the Home ribbon tab:

A newly created tab container contains an empty tab page (Page 1).

Click the + (plus) icon to add an empty page to the tab container. You can use drag-and-drop to add dashboard items to a tab page and manage the layout. Tab containers cannot be nested, so you cannot add a tab container to another tab container. However, a tab container can contain item groups.

See the Dashboard Item Caption topic to learn how to manage a tab container’s caption.

Tab Order

To change the tab page order, click the Reorder Tabs button on the Tab settings group.

The Tabs Order dialog is invoked.

Click up and down arrows to change the order of the tab pages in the tab container. The ordering reflects the position in the TabContainerDashboardItem.TabPages collection.

Display Item as Page

The tab caption is above the caption of the content element on the page. If a tab page contains a single element, the Display Item as Page feature is activated. It merges the dashboard item with a tab page and displays a single caption, as illustrated below.

To disable the Display Item as Page feature, use one of the following methods:

  • Select the tab page and click the Display Item as Page button in the Layout group on the Design ribbon tab of the Page Tools contextual tab set.

  • Select the Display Item as Page command in the tab page context menu.
  • In code, set the ShowItemAsTabPage property to false.


Click the element’s border or use the item’s context menu to select a page or a tab container:


Follow the steps below to create a tab container in code:

  1. Create the TabContainerDashboardItem class instance.
  2. Use one of the following ways to add an empty tab page to the container:
  3. Add dashboard items to the created page (for example, using the DashboardTabPage.Add / DashboardTabPage.AddRange methods).
  4. Add the created tab container to the Dashboard.Items collection.

The complete sample project How to Create and Modify Dashboard Items and Tab Pages is available in the DevExpress Examples repository.

TabContainerDashboardItem tabContainer = new TabContainerDashboardItem();
tabContainer.TabPages.Add(new DashboardTabPage() { Name = "Tab Page One", ComponentName = "page1" });
tabContainer.TabPages["page1"].AddRange(dashboard.Items["grid1"], dashboard.Items["pie1"]);

DashboardTabPage secondTabPage = tabContainer.CreateTabPage();
secondTabPage.Name = "Tab Page Two";
secondTabPage.ShowItemAsTabPage = true;


Use the dashboard item’s DashboardItem.ParentContainer property value to move a dashboard item from the one tab page to another.


The tab page can include dashboard items and groups, but cannot include tab pages and tab containers. Nested tabs are not allowed.


The tab page allows you to manage the interaction between dashboard items inside and outside the page.

The following image shows a tab page’s default interactivity settings:

The Master Filter button (in the Interactivity group on the Data ribbon tab of the Page Tools contextual tab set) controls whether the current page’s master filter items can filter dashboard items outside the page. This option is enabled for the newly created tab page: master filter items in the page can filter any dashboard items.

The Ignore Master Filters button (in the Interactivity group on the Data ribbon tab of the Page Tools contextual tab set) allows you to isolate dashboard items contained within the tab page from external master filter items. This option is disabled for the newly created tab page: external master filter items can filter the dashboard items contained within the tab page.


The default tab page’s interactivity settings are the opposite of the default dashboard group‘s interactivity settings.

Use the DashboardTabPage.InteractivityOptions property to access the dashboard item page’s interactivity settings in code. This property returns the DashboardItemGroupInteractivityOptions object that exposes the following members:




Gets or sets whether external dashboard items can be filtered using master filter items contained in the current DashboardItemGroup / TabContainerDashboardItem.


Gets or sets whether the current dashboard item ignores filtering applied by master filters.

Custom Buttons

You can handle the DashboardDesigner.CustomizeDashboardItemCaption / DashboardViewer.CustomizeDashboardItemCaption events for the designer / viewer to customize the tab page caption and add a custom button to display additional information or perform the required action.


The complete sample project How to Create and Modify Dashboard Items and Tab Pages is available in the DevExpress Examples repository.

private void DashboardViewer1_CustomizeDashboardItemCaption(object sender, CustomizeDashboardItemCaptionEventArgs e)
    Dashboard dashboard = ((DashboardViewer)sender).Dashboard;

    if (e.DashboardItemName == "page1")
        e.Items.Add(new DashboardToolbarItem("",
        new Action<DashboardToolbarItemClickEventArgs>((args) =>
        { ButtonImage = Image.FromFile("Support_16x16.png") });
See Also