Dashboard Model

• Feb 24, 2023
• 2 minutes to read

Note

You can use the Model API only in the Designer working mode.

The Dashboard.Model module contains classes and members that describe the Dashboard object model. This module contains API used to perform user actions in a client UI. You can create or update dashboard items and the entire dashboard, manage format rules, change an item’s layout, add dashboard parameters, etc.

For example, the Dashboard class describes a dashboard, including the collection of dashboard items and groups, data binding information, and layout and appearance settings. You can add dashboard parameters (Dashboard.parameters), change dashboard title settings (Dashboard.title), customize a global color scheme (Dashboard.colorScheme), etc.

You can use DashboardItem descendants to create a dashboard item on the client side, configure it and bind it to data.

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");