How to: Access API of Underlying Widgets in the ASP.NET Web Forms Dashboard Control
- 2 minutes to read
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.
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
});
}
}