The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.1
19.2 (preview)
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Access to Underlying Widgets

  • 3 min to read

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.

The DashboardControl exposes the following members that allow you to access these widgets and customize their settings:

The ItemWidgetEventArgs.itemName property returns the component name of the dashboard item whose widget can be customized. Use the ItemWidgetEventArgs.getWidget property to access the corresponding underlying widget.

The following table lists dashboard items whose underlying widgets can be accessed when you handle the ItemWidget... events:

Dashboard Item

Underlying Widget(s)

GridItem

dxDataGrid

ChartItem

ScatterChartItem

dxChart

PieItem

an array of dxPieChart widgets

GaugeItem

an array of dxCircularGauge or dxLinearGauge widgets

MapItem

dxVectorMap

PivotItem

dxPivotGrid

ComboBoxItem

dxSelectBox or dxTagBox

ListBoxItem

dxList

TreeViewItem

dxTreeList

dxTreeView (for v17.1 and earlier)

TreemapItem

dxTreeMap

RangeFilterItem

dxRangeSelector

CardItem

CardWidget

DateFilterItem

DateFilterWidget

TextBoxItem

n/a See Note 1

ImageItem

n/a See Note 1

CustomItem

n/a See Note 2

1 The content of the TextBoxDashboardItem and the ImageDashboardItem is an HTML element wrapped in a jQuery object.

2 The CustomDashboardItem is a custom widget. You can customize it directly.

Limitations

Do not change the following settings to avoid possible issues:

  • data binding settings;
  • basic data presentation settings (for instance, a set of grid columns or chart series).

Note that changes made with the ItemWidget... events do not change the dashboard/dashboard items' appearance in exported documents.

Example

The following code snippets show how to customize client widgets used to visualize data within dashboard items at runtime on the client side.

The changed options are listed below:

// ...
var dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"),  {  
    endpoint: "https://demos.devexpress.com/services/dashboard/api",
    workingMode: "Designer",
    extensions: {
        "viewer-api": {
            onItemWidgetUpdated: "function(s, e) { customizeWidgets(e); }",
            onItemWidgetCreated: "function(s, e) { customizeWidgets(e); }",
            onItemWidgetUpdating: "function(s, e) { unsubscribeFromEvents(e); }"
        }
    }
});