Important
This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.
Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:
The Web Viewer allows you to add a custom interactivity to dashboards using the ASPxClientDashboardViewer.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.
using System;
using Dashboard_CustomVisualInteractivity_Web.nwindDataSetTableAdapters;
namespace Dashboard_CustomVisualInteractivity_Web {
public partial class Dashboard1 : DevExpress.DashboardCommon.Dashboard {
public Dashboard1() {
InitializeComponent();
}
private void Dashboard1_DashboardLoading(object sender, EventArgs e) {
SalesPersonTableAdapter categories = new SalesPersonTableAdapter();
categories.Fill(this.nwindDataSet1.SalesPerson);
}
}
}
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;
}
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;
}
Imports System
Imports Dashboard_CustomVisualInteractivity_Web.nwindDataSetTableAdapters
Namespace Dashboard_CustomVisualInteractivity_Web
Partial Public Class Dashboard1
Inherits DevExpress.DashboardCommon.Dashboard
Public Sub New()
InitializeComponent()
End Sub
Private Sub Dashboard1_DashboardLoading(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.DashboardLoading
Dim categories As New SalesPersonTableAdapter()
categories.Fill(Me.nwindDataSet1.SalesPerson)
End Sub
End Class
End Namespace
See Also