How to: Get Data from a Clicked Dashboard Item

Dec 26, 2019
3 minutes to read

This example shows how to get data from a clicked dashboard item using the client-side ASPxClientDashboard.ItemClick event.

The event handler receives arguments of the ASPxClientDashboardItemClickEventArgs type, which allows you to get data displayed in a clicked item: grid rows, series points, cards, etc.

Note that some dashboard items display multidimensional data. See the Obtaining Underlying and Displayed Data help topic for more information about the general data structure. Use these steps to get data in the following order:

Call the GetData method to request the ASPxClientDashboardItemData object that provides all information about item data.
Get a list of displayed axes by calling the ASPxClientDashboardItemData.GetAxisNames method.
Get information about dimensions corresponding to each axis using the GetDimensions and GetAxisPoint methods.
To get the last level measure values, divide data by displayed axis points using the GetSlice method and call the GetMeasureValue method.

Note

A complete sample project Web Dashboard - How to get data from a clicked dashboard item is available at GitHub.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApp.Default" %>

<%@ Register Assembly="DevExpress.Web.v18.2, Version=18.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Dashboard.v18.2.Web.WebForms, Version=18.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function onItemClick(s, args) {
            if(args.ItemName == "chartDashboardItem1") {
                var itemData = args.GetData(),
                    axes = itemData.GetAxisNames(),
                    measures = itemData.GetMeasures(),
                    row = [],
                    rowText = "";
                $.each(axes, function(_, axis) {
                    rowText = rowText + axis + "\n";
                    var axisPoint = args.GetAxisPoint(axis);
                    var dimensions = itemData.GetDimensions(axis);
                    $.each(dimensions, function(_, dimension) {
                        var dimensionValue = axisPoint.GetDimensionValue(dimension.Id);
                        if(dimensionValue != null) {
                            row.push(dimensionValue.GetDisplayText());
                            rowText = rowText + "    " + dimension.Name + ": " + dimensionValue.GetDisplayText() + "\n";
                        }
                    });
                });
                var dataSlice = itemData;
                $.each(axes, function(_, axis) {
                    var axisPoint = args.GetAxisPoint(axis);
                    dataSlice = dataSlice.GetSlice(axisPoint);

                });
                rowText = rowText + "Measures:\n";
                $.each(measures, function(_, measure) {
                    var measureValue = dataSlice.GetMeasureValue(measure.Id);
                    row.push(measureValue.GetValue());
                    rowText = rowText + "   " + measureValue.GetValue() + "; ";
                });
                alert(rowText);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" WorkingMode="ViewerOnly">
                <ClientSideEvents
                    ItemClick="onItemClick" />
            </dx:ASPxDashboard>
        </div>
    </form>
</body>
</html>

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DataAccess.Sql;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApp {
    public partial class Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            ASPxDashboard1.SetDashboardStorage(dashboardFileStorage);

            DashboardSqlDataSource sqlDataSource = new DashboardSqlDataSource("SQL Data Source", "nwindConnection");
            SelectQuery countriesQuery = SelectQueryFluentBuilder
                .AddTable("Invoices")
                .SelectAllColumns()
                .Build("MyQuery");
            sqlDataSource.Queries.Add(countriesQuery);

            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
            dataSourceStorage.RegisterDataSource("sqlDataSource1", sqlDataSource.SaveToXml());
            ASPxDashboard1.SetDataSourceStorage(dataSourceStorage);
        }
    }
}

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters
Imports DevExpress.DataAccess.Sql
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace WebApp
    Partial Public Class [Default]
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim dashboardFileStorage As New DashboardFileStorage("~/App_Data/Dashboards")
            ASPxDashboard1.SetDashboardStorage(dashboardFileStorage)

            Dim sqlDataSource As New DashboardSqlDataSource("SQL Data Source", "nwindConnection")
            Dim countriesQuery As SelectQuery = SelectQueryFluentBuilder.AddTable("Invoices").SelectAllColumns().Build("MyQuery")
            sqlDataSource.Queries.Add(countriesQuery)

            Dim dataSourceStorage As New DataSourceInMemoryStorage()
            dataSourceStorage.RegisterDataSource("sqlDataSource1", sqlDataSource.SaveToXml())
            ASPxDashboard1.SetDataSourceStorage(dataSourceStorage)
        End Sub
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode