Skip to main content

DashboardTabPage Class

A tab page in a TabContainerItem.

#Declaration

TypeScript
export class DashboardTabPage extends DashboardItem

#Remarks

The DashboardTabPage class is the tabbed page in the TabContainerItem. Tabbed pages are contained in the tabPages collection. Collection indexes determine the visual tab order.

The created tab container always contains one empty tab page (pageDashboardItem1). Create a new tab page using a constructor and add it to the tab container’s tabPages collection to add one more tab page.

The following example shows how to add the tab container with two tab pages (tabPage1 and tabPage2).

After you add the created dashboard item to the Dashboard.items collection, call the Dashboard.rebuildLayout method to rebuild the dashboard layout and display changes.

javascript
// Use the line below for a modular approach:
// import * as Model from 'devexpress-dashboard/model'
// Use the line below for an approach with global namespaces:
// var Model = DevExpress.Dashboard.Model;

public createTabs() { 
    var tabContainer1 = new Model.TabContainerItem();
    tabContainer1.tabPages()[0].name("Difference");

    var page2 = new Model.DashboardTabPage();
    page2.name("Sales");
    tabContainer1.tabPages.push(page2);

    tabContainer1.tabPages()[0].componentName("tabPage1");
    tabContainer1.tabPages()[1].componentName("tabPage2");

    dashboardControl.dashboard().items.push(tabContainer1);
    // ...
    dashboardControl.dashboard().rebuildLayout();
}

To add a dashboard item to the tab container, assign the tab page’s componentName to the dashboard item’s parentContainer property.

javascript
dashboardItem.parentContainer("tabPage1");

#constructor

Initializes a new instance of the DashboardTabPage class.

#Declaration

TypeScript
constructor(
    dashboardItemJSON?: any,
    serializer?: DevExpress.Analytics.Utils.ModelSerializer
)

#Parameters

Name Type Description
dashboardItemJSON any

A JSON object used for dashboard deserialization. Do not pass this parameter directly.

serializer ModelSerializer

An object used for dashboard deserialization. Do not pass this parameter directly.

#Properties

#interactivityOptions Property

#Declaration

TypeScript
interactivityOptions: DevExpress.Dashboard.Model.DashboardItemGroupInteractivityOptions

#Property Value

Type
DashboardItemGroupInteractivityOptions

#showItemAsTabPage Property

Specifies whether to display a single dashboard item like a tab page.

#Declaration

TypeScript
showItemAsTabPage: ko.Observable<boolean>

#Property Value

Type Description
Observable<boolean>

true, to display a single dashboard item as tab page; otherwise, false.

#Remarks

If the showItemAsTabPage property is true and the tab page contains a single dashboard item, the item’s visual borders are merged with the tab page borders and the item’s caption becomes the tab caption, as illustrated below:

The default showItemAsTabPage value is true. When you drop an item to an empty tab page, the item is displayed as tab page.

To disable the Display Item as Page feature in UI, enable the Display Item as Page option in the tab page’s Options menu.

#Methods

#getUniqueNamePrefix Method

#Declaration

TypeScript
getUniqueNamePrefix(): string

#Returns

Type
string