ASPxClientDashboardItemVisualInteractivityEventArgs Class
Provides data for the ASPxClientDashboard.ItemVisualInteractivity / ASPxClientDashboardViewer.ItemVisualInteractivity events.
Namespace: DevExpress.DashboardWeb.Scripts
Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll
Declaration
Remarks
The ASPxClientDashboard.ItemVisualInteractivity / ASPxClientDashboardViewer.ItemVisualInteractivity events allow you to provide custom visual interactivity for data-bound dashboard items that support element selection and highlighting. This event is raised for dashboard items with disabled master filtering. Visual interactivity is enabled for master filter items by default. The ASPxClientDashboard / ASPxClientDashboardViewer also fire these events when master filtering is applied to the current dashboard item or drill-down is performed in this dashboard item.
Use the ASPxClientDashboardItemVisualInteractivityEventArgs.ItemName event parameter to obtain the name of the dashboard item for which the event was raised. The ASPxClientDashboardItemVisualInteractivityEventArgs.SetTargetAxes method allows you to specify data axes used to perform custom interactivity actions (selection of grid rows, selection and highlighting of chart series points, etc.).
To specify the selection mode and enable highlighting, use the ASPxClientDashboardItemVisualInteractivityEventArgs.SetSelectionMode and ASPxClientDashboardItemVisualInteractivityEventArgs.EnableHighlighting methods respectively. The ASPxClientDashboardItemVisualInteractivityEventArgs.SetDefaultSelection method provides the capability to specify the default selection for the current dashboard item.
After the selection is changed, the ASPxClientDashboard.ItemSelectionChanged / ASPxClientDashboardViewer.ItemSelectionChanged event is raised. Its ASPxClientDashboardItemSelectionChangedEventArgs.GetCurrentSelection method returns the selected elements.
The following table lists possible target axes for each dashboard item and supported interactivity capabilities.
Dashboard Item | Target Axes | Selection | Highlighting |
|---|---|---|---|
| |||
|
| ||
|
| ||
|
| ||
|
| ||
|
| ||
|
| ||
|
|
Note
Note that the Grid dashboard item does not support custom interactivity when Cell Merging is enabled.
Example
The Web Dashboard allows you to add a custom interactivity to dashboards using the ASPxClientDashboard.ItemVisualInteractivity event. This example demonstrates the following capabilities.
- The Grid dashboard item allows you to select categories and visualize a corresponding product quantity using the dxBarGauge widget. Note that the hidden ‘Quantity’ measure is used to pass the required values to the client.
- The Chart dashboard item highlights bars corresponding to a hovered argument value.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxdashboard-how-to-add-custom-interactivity-to-a-dashboard-t495562.
var defaultAxis = DashboardDataAxisNames.DefaultAxis,
argumentAxis = DashboardDataAxisNames.ChartArgumentAxis;
function addCustomInteractivity(args) {
if (args.ItemName == "gridDashboardItem1") {
args.SetTargetAxes([defaultAxis]);
args.SetSelectionMode("Multiple");
}
if (args.ItemName == "chartDashboardItem1") {
args.SetTargetAxes([argumentAxis]);
args.EnableHighlighting(true);
}
}
function createControls() {
$('#barGauge').dxBarGauge({
startValue: 0,
endValue: 10000,
values: getAllValues(),
label: {
format: 'fixedPoint',
precision: 0
}
});
}
function applyCurrentSelection(args) {
var quantityValues = [];
if (args.ItemName == "gridDashboardItem1" & args.GetCurrentSelection().length != 0) {
var clientData = webViewer.GetItemData("gridDashboardItem1");
for (var i = 0; i < args.GetCurrentSelection().length; i++) {
var currentTuple = args.GetCurrentSelection()[i],
slice = clientData.GetSlice(currentTuple.GetAxisPoint()),
quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
quantityValues.push(quantity);
}
} else {
quantityValues = getAllValues();
}
$('#barGauge').data("dxBarGauge").values(quantityValues);
}
function getAllValues() {
var quantityValues = [],
clientData = webViewer.GetItemData("gridDashboardItem1");
for (var i = 0; i < clientData.GetAxis(defaultAxis).GetPoints().length; i++) {
var slice = clientData.GetSlice(clientData.GetAxis(defaultAxis).GetPoints()[i]),
quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
quantityValues.push(quantity);
}
return quantityValues;
}