TabContainerItem Class

A tab container used to arrange dashboard items and groups within a dashboard.

Declaration

export class TabContainerItem extends DashboardItem

Remarks

A tab container is a dashboard item that stores tab pages.

Use a constructor to create a tab container. The created tab container always contains one empty tab page (pageDashboardItem1). Dashboard items and groups are located within tab pages. Create a new tab page using a constructor and add it to the tab container’s tabPages collection to add one more tab page.

A tab container should be added to the Dashboard.items collection.

A tab container cannot be placed in other dashboard item containers and its parentContainer property is always null.

The default component name of the created tab container is tabContainerDashboardItem1.

Example

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.

// 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.

dashboardItem.parentContainer("tabPage1");

Inherited Members

DevExpress.Dashboard.Model.DataDashboardItem.componentName
DevExpress.Dashboard.Model.DataDashboardItem.customProperties
DevExpress.Dashboard.Model.DataDashboardItem.name
DevExpress.Dashboard.Model.DataDashboardItem.parentContainer
DevExpress.Dashboard.Model.DataDashboardItem.showCaption
DevExpress.Dashboard.Model.DataDashboardItem.getInfo
DevExpress.Dashboard.Model.DataDashboardItem.getUniqueNamePrefix

constructor

Initializes a new instance of the TabContainerItem class.

Declaration

constructor(
    dashboardItemJSON?: any,
    serializer?: 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

tabPages Property

Provides access to the collection of tab pages stored in the tab container.

Declaration

tabPages: ko.ObservableArray<DashboardTabPage>

Property Value

Type Description
ObservableArray<DashboardTabPage>

A collection of tab pages in the tab container.

Remarks

To obtain a dashboard’s tab page, select the required tab container and use the tabPages property to get access to the container’s tab pages.

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.

// 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.

dashboardItem.parentContainer("tabPage1");