Access to Underlying Widgets
- 4 minutes to read
The Web Dashboard control uses DevExtreme widgets to visualize data within dashboard items. If necessary, you can access these widgets and customize their settings to add specific capabilities.
The ASPxClientDashboard exposes the following events that allow you to access these widgets and customize their settings.
- The ASPxClientDashboard.ItemWidgetCreated event is raised once for each widget when the dashboard is loaded to client. Handle this event to subscribe to events of the client widget.
- ASPxClientDashboard.ItemWidgetUpdating/ASPxClientDashboard.ItemWidgetUpdated events are raised when the client widget needs to be updated. For instance, this can be related to applying master filtering or changing parameter values. Handle the ASPxClientDashboard.ItemWidgetUpdating event to unsubscribe from events of the client widget. To customize widgets according your requirements, handle the ASPxClientDashboard.ItemWidgetUpdated event. This allows you to prevent the rewriting of customized options by the ASPxClientDashboard.
The ASPxClientDashboardItemWidgetEventArgs.ItemName event parameter returns the component name of the dashboard item whose widget may be customized. Use the ASPxClientDashboardItemWidgetEventArgs.GetWidget method to access the corresponding underlying widget.
The following table lists dashboard items whose underlying widgets may be accessed when handling the ItemWidget… events.
Dashboard Item | Underlying Widget(s) |
---|---|
an array of dxPieChart widgets | |
an array of dxCircularGauge or dxLinearGauge widgets | |
Note Note that the dxTreeView widget is used in v17.1 and earlier. | |
n/a See Note | |
n/a See Note | |
n/a See Note |
Note
The content of the TextBoxDashboardItem and ImageDashboardItem are an HTML element wrapped to a jQuery object.
Note
The CustomDashboardItem is a custom widget you can customize directly.
Limitations
Note that changing specific control settings may lead to various issues, thus changing the following settings is not recommended:
- data binding settings;
- basic data presentation settings (for instance, a set of grid columns or chart series).
Note
Note that printed or exported documents containing a dashboard/dashboard item do not reflect appearance settings applied using the events meant for accessing underlying controls.
Example
This example demonstrates how to customize client widgets used to visualize data within dashboard items at runtime using ASPxClientDashboard‘s API.
The following options are changed.
- Highlighting of the hovered grid row is enabled in the underlying dxDataGrid in the ASPxClientDashboard.ItemWidgetCreated event handler.
- A standard tooltip that is invoked when an end-user hovers over a chart series point is disabled. You can invoke a tooltip by clicking the required label on the argument axis. The argumentAxisClick event is used for this purpose. Subscription and unsubscription to/from the argumentAxisClick event are performed in the ASPxClientDashboard.ItemWidgetUpdated and ASPxClientDashboard.ItemWidgetUpdating event handlers respectively.
- A pie legend is shown for the underlying dxPieChart.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-access-api-of-underlying-widgets-in-the-aspnet-dashboard-control-t492396.
- WidgetsCustomization.js (VB.NET)
- Default.aspx.vb
- Default.aspx (VB.NET)
- Default.aspx.cs
- WidgetsCustomization.js (C#)
- Default.aspx (C#)
function customizeWidgets(args) {
if (args.ItemName == "gridDashboardItem1") {
var grid = args.GetWidget();
grid.option({
hoverStateEnabled: true
});
}
if (args.ItemName == "chartDashboardItem1") {
var chart = args.GetWidget();
chart.option({
tooltip: {
enabled: false
},
onArgumentAxisClick: function (info) {
info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
}
});
}
if (args.ItemName == "pieDashboardItem1") {
var pie = args.GetWidget()[0];
pie.option({
legend: {
visible: true,
border: {
visible: true
}
}
});
}
}
function unsubscribeFromEvents(args) {
if (args.ItemName == "chartDashboardItem1") {
var chart = args.GetWidget();
chart.option({
onArgumentAxisClick: undefined
});
}
}