TabContainerItem Class
A tab container used to arrange dashboard items and groups within a dashboard.
Declaration
export class TabContainerItem extends DashboardItemRemarks
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
Inheritance
constructor
Initializes a new instance of the TabContainerItem class.
Declaration
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
tabPages Property
Provides access to the collection of tab pages stored in the tab container.
Declaration
tabPages: ko.ObservableArray<DevExpress.Dashboard.Model.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");
Methods
dispose Method
Disposes of all resources associated with this TabContainerItem.
Declaration
dispose(): void