How to: Obtain a Dashboard Item's Underlying Data for a Clicked Visual Element

Aug 03, 2020
3 minutes to read

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:

ASPxDashboardViewer -> ASPxDashboard

How to migrate from ASPxDashboardViewer to ASPxDashboard working in the ViewerOnly mode
MVCxDashboardViewer -> MVCxDashboard

How to migrate from DashboardViewerExtension to DashboardExtension working in the ViewerOnly mode

The following example demonstrates how to obtain underlying data corresponding to a particular visual element using the ASPxClientDashboardViewer‘s API.

In this example, the ASPxClientDashboardViewer.ItemClick event is handled to obtain underlying data and invoke the dxPopup widget with the child dxDataGrid.

In the event handler, the ASPxClientDashboardItemClickEventArgs.RequestUnderlyingData method is called to obtain records from the dashboard’s data source. The dxDataGrid is used to display these records.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/web-viewer-how-to-obtain-a-dashboard-items-underlying-data-for-a-clicked-visual-element-t115445.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="myPopup"></div>
    <div>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/UnderlyingData.js") %>">
    </script>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="<%# typeof(Dashboard_UnderlyingDataWeb.SalesDashboard) %>">            
            <ClientSideEvents 
                   ItemClick="function(s, e) { getUnderlyingData(e); }"
                   Init="function(s, e) { initPopup(); }" />
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

using System;
using Dashboard_UnderlyingDataWeb.nwindDataSetTableAdapters;

namespace Dashboard_UnderlyingDataWeb {
    public partial class SalesDashboard : DevExpress.DashboardCommon.Dashboard {
        public SalesDashboard() {
            InitializeComponent();
        }

        private void SalesDashboard_DashboardLoading(object sender, EventArgs e) {
            SalesPersonTableAdapter categories = new SalesPersonTableAdapter();
            categories.Fill(this.nwindDataSet1.SalesPerson);
        }
    }
}

function getUnderlyingData(args) {
    var underlyingData = [];

    args.RequestUnderlyingData(function (data) {
        dataMembers = data.GetDataMembers();
        for (var i = 0; i < data.GetRowCount(); i++) {
            var dataTableRow = {};
            $.each(dataMembers, function (_, dataMember) {
                dataTableRow[dataMember] = data.GetRowValue(i, dataMember);
            });
            underlyingData.push(dataTableRow);
        }

        var $grid = $('<div/>');
        $grid.dxDataGrid({
            height: 500,
            scrolling: {
                mode: 'virtual'
            },
            dataSource: underlyingData
        });

        var popup = $("#myPopup").data("dxPopup");
        $popupContent = popup.content();
        $popupContent.empty();
        $popupContent.append($grid);
        popup.show();
    });
}

function initPopup() {
    $("#myPopup").dxPopup({
        width: 800, height: 600,
        title: "Underlying data",
        showCloseButton: true
    });
}

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
         Inherits="Dashboard_UnderlyingDataWeb.WebForm1" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="myPopup"></div>
    <div>
    <script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/UnderlyingData.js")%>">
    </script>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="<%#GetType(Dashboard_UnderlyingDataWeb.SalesDashboard)%>">            
            <ClientSideEvents 
                   ItemClick="function(s, e) { getUnderlyingData(e); }"
                   Init="function(s, e) { initPopup(); }" />
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

Imports System
Imports Dashboard_UnderlyingDataWeb.nwindDataSetTableAdapters

Namespace Dashboard_UnderlyingDataWeb
    Partial Public Class SalesDashboard
        Inherits DevExpress.DashboardCommon.Dashboard

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub SalesDashboard_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

function getUnderlyingData(args) {
    var underlyingData = [];

    args.RequestUnderlyingData(function (data) {
        dataMembers = data.GetDataMembers();
        for (var i = 0; i < data.GetRowCount(); i++) {
            var dataTableRow = {};
            $.each(dataMembers, function (_, dataMember) {
                dataTableRow[dataMember] = data.GetRowValue(i, dataMember);
            });
            underlyingData.push(dataTableRow);
        }

        var $grid = $('<div/>');
        $grid.dxDataGrid({
            height: 500,
            scrolling: {
                mode: 'virtual'
            },
            dataSource: underlyingData
        });

        var popup = $("#myPopup").data("dxPopup");
        $popupContent = popup.content();
        $popupContent.empty();
        $popupContent.append($grid);
        popup.show();
    });
}

function initPopup() {
    $("#myPopup").dxPopup({
        width: 800, height: 600,
        title: "Underlying data",
        showCloseButton: true
    });
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode