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

Aug 01, 2019
3 minutes to read

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

In this example, the ASPxClientDashboard.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/aspxdashboard-how-to-obtain-a-dashboard-items-underlying-data-for-a-clicked-visual-element-t492257.

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="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
    Inherits="ASPxDashboard_UnderlyingData.WebForm1" %>

<%@ Register Assembly="DevExpress.Dashboard.v16.2.Web, Version=16.2.5.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>

</head>
<body>
    <form id="form1" runat="server">
    <div id="myPopup"></div>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;">               
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer"           
            Height="100%" Width="100%">
            <ClientSideEvents 
                   ItemClick="function(s, e) { getUnderlyingData(e); }"
                   Init="function(s, e) { initPopup(); }" />
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/UnderlyingData.js") %>"></script>

using System;

namespace ASPxDashboard_UnderlyingData
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ASPxDashboard1.DashboardXmlPath = Server.MapPath("App_Data/dashboard1.xml");
        }
    }
}

Imports System

Namespace ASPxDashboard_UnderlyingData
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ASPxDashboard1.DashboardXmlPath = Server.MapPath("App_Data/dashboard1.xml")
        End Sub
    End Class
End Namespace

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

<%@ Register Assembly="DevExpress.Dashboard.v16.2.Web, Version=16.2.5.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>

</head>
<body>
    <form id="form1" runat="server">
    <div id="myPopup"></div>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;">               
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer"           
            Height="100%" Width="100%">
            <ClientSideEvents 
                   ItemClick="function(s, e) { getUnderlyingData(e); }"
                   Init="function(s, e) { initPopup(); }" />
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/UnderlyingData.js")%>"></script>

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