ASPxClientDashboardItemUnderlyingData Class

Represents a list of records from the dashboard data source.

Declaration

declare class ASPxClientDashboardItemUnderlyingData

Remarks

An ASPxClientDashboardItemUnderlyingData object is returned by the ASPxClientDashboard.RequestUnderlyingData method.

You can also obtain the underlying data for specific visual elements when handling client-side events, for instance, the ASPxClientDashboard.ItemClick event. Use the ASPxClientDashboardItemClickEventArgs.RequestUnderlyingData method to do this.

Example

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
    });
}

Methods

GetDataMembers Method

Returns an array of data members available in a data source.

Declaration

GetDataMembers(): string[]

Returns

Type	Description
string[]	An array of string values that represent data members available in a data source.

GetRequestDataError Method

Returns a callstack containing the error caused by an unsuccessful request for underlying data.

Declaration

GetRequestDataError(): string

Returns

Type	Description
string	A String representing a callstack containing the error caused by an unsuccessful request for underlying data.

Remarks

The ASPxClientDashboardItemUnderlyingData.IsDataReceived method returns whether a request for underlying data was successful. If data was not received, use the GetRequestDataError method to obtain a callstack containing the cause of the error.

GetRowCount Method

Gets the number of rows in the underlying data set.

Declaration

GetRowCount(): number

Returns

Type	Description
number	An integer value that specifies the number of rows in the underlying data set.

GetRowValue(rowIndex, dataMember) Method

Returns the value of the specified cell within the underlying data set.

Declaration

GetRowValue(
    rowIndex: number,
    dataMember: string
): any

Parameters

Name	Type	Description
rowIndex	number	An integer value that specifies the zero-based index of the required row.
dataMember	string	A String that specifies the required data member.

Returns

Type	Description
any	An object that represents the value of the specified cell.

IsDataReceived Method

Returns whether a request for underlying data was successful.

Declaration

IsDataReceived(): boolean

Returns

Type	Description
boolean	true, if the request for underlying data was successful; otherwise, false.

Remarks

The IsDataReceived method returns whether a request for underlying data was successful. If data was not received, use the ASPxClientDashboardItemUnderlyingData.GetRequestDataError method to obtain a callstack containing the cause of the error.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

ASPxClientDashboardItemUnderlyingData Class

Declaration

Remarks

Example

Methods

GetDataMembers Method

Declaration

Returns

GetRequestDataError Method

Declaration

Returns

Remarks

GetRowCount Method

Declaration

Returns

GetRowValue(rowIndex, dataMember) Method

Declaration

Parameters

Returns

IsDataReceived Method

Declaration

Returns

Remarks