Client-Side Customization

• Jan 25, 2021
• 3 minutes to read

The Web Dashboard is a client-side control that uses HTTP requests to communicate with server. This topic describes how to customize Web Dashboard on the client side.

Extensions

You can use independent JavaScript modules/classes called extensions to manage the Web Dashboard’s functionality. For example, the DashboardExportExtension enables users to export the dashboard’s data, the DashboardParameterDialogExtension adds dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox.

Tip

Documentation: Extensions Overview

Model

Note

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

The Dashboard.Model module contains classes and members that comprise the Dashboard object model. This module provides 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 contains a complete description of 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");

Tip

Documentation: DevExpress.Dashboard.Model

Access to Underlying Widgets

The Web Dashboard control uses DevExtreme widgets to visualize dashboard items’ data. You can access these widgets and customize their settings to add specific capabilities.

Tip

Documentation:

• DashboardControl - Access to Underlying Widgets
• ASP.NET Core - Access to Underlying Widgets
• ASP.NET MVC - Access to Underlying Widgets
• ASP.NET Web Forms - Access to Underlying Widgets

Custom Properties

Custom properties allow you to store custom settings in a dashboard definition. You can read these settings and use these values to natively implement and embed your own functionality into a Web Dashboard.

Tip

Documentation: Custom Properties

Custom Items

A custom item is a complex extension that acts as a dashboard item. You can use DevExtreme widgets or third-party JavaScript libraries to create additional dashboard items (for example, the d3-funnel library is used to create the FunnelD3 custom item).

Use the DashboardControl.registerExtension method to add the custom item to the Web Dashboard.

Tip

Documentation: Custom Item