The following example demonstrates how to get underlying data for the specified dashboard item using the ASPxClientDashboard.RequestUnderlyingData method. This method accepts the component name of the dashboard item and specific parameters used to request data.
function loadUnderlyingData() {
// Gets client data displayed in the Card dashboard item.
var clientData = webDashboard.GetItemData('cardDashboardItem1');
// Creates an array of data members used to obtain underlying data.
var availableDataMembers = clientData.GetDataMembers();
var specificDataMembers = availableDataMembers.filter(function (dataMember) {
return ['Sales Person', 'Extended Price', 'OrderDate'].indexOf(dataMember) !== -1;
});
// Gets an axis point corresponding to a specific employee.
var allSalesPersons = clientData.GetAxis(DashboardDataAxisNames.DefaultAxis).GetPoints();
var specificSalesPerson = allSalesPersons.find(function (person) {
return person.GetValue() === "Andrew Fuller";
});
// Gets an axis point corresponding to a specific month.
var allDates = clientData.GetAxis(DashboardDataAxisNames.SparklineAxis).GetPoints();
var specificDate = allDates.find(function (date) {
return date.GetValue().toDateString() === (new Date(2016, 4, 1)).toDateString();
});
// Creates an object passed to the RequestUnderlyingData method.
var requestParameters = {
DataMembers: specificDataMembers,
AxisPoints: [specificSalesPerson, specificDate]
};
var underlyingData = [];
// Calls the RequestUnderlyingData method for the Card dashboard item with the specified parameters.
webDashboard.RequestUnderlyingData('cardDashboardItem1', requestParameters, 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);
}
$("#detailGrid").dxDataGrid({
height: 850,
scrolling: {
mode: 'virtual'
},
dataSource: underlyingData
});
});
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_RequestUnderlyingData.Default" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.3.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="detailGrid" style="position:absolute; left:600px; right:0; top:0; bottom:0;"></div>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server"
DashboardXmlPath="~/App_Data/dashboard1.xml"
WorkingMode="Viewer"
ClientInstanceName="webDashboard"
Height="850px" Width="600px">
<ClientSideEvents DashboardEndUpdate="function(s, e) { loadUnderlyingData(); }"></ClientSideEvents>
</dx:ASPxDashboard>
</div>
</form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/UnderlyingData.js") %>"></script>
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ASPxDashboard_RequestUnderlyingData.Default" %>
<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.3.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="detailGrid" style="position:absolute; left:600px; right:0; top:0; bottom:0;"></div>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;">
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server"
DashboardXmlPath="~/App_Data/dashboard1.xml"
WorkingMode="Viewer"
ClientInstanceName="webDashboard"
Height="850px" Width="600px">
<ClientSideEvents DashboardEndUpdate="function(s, e) { loadUnderlyingData(); }"></ClientSideEvents>
</dx:ASPxDashboard>
</div>
</form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/UnderlyingData.js")%>"></script>
function loadUnderlyingData() {
// Gets client data displayed in the Card dashboard item.
var clientData = webDashboard.GetItemData('cardDashboardItem1');
// Creates an array of data members used to obtain underlying data.
var availableDataMembers = clientData.GetDataMembers();
var specificDataMembers = availableDataMembers.filter(function (dataMember) {
return ['Sales Person', 'Extended Price', 'OrderDate'].indexOf(dataMember) !== -1;
});
// Gets an axis point corresponding to a specific employee.
var allSalesPersons = clientData.GetAxis(DashboardDataAxisNames.DefaultAxis).GetPoints();
var specificSalesPerson = allSalesPersons.find(function (person) {
return person.GetValue() === "Andrew Fuller";
});
// Gets an axis point corresponding to a specific month.
var allDates = clientData.GetAxis(DashboardDataAxisNames.SparklineAxis).GetPoints();
var specificDate = allDates.find(function (date) {
return date.GetValue().toDateString() === (new Date(2016, 4, 1)).toDateString();
});
// Creates an object passed to the RequestUnderlyingData method.
var requestParameters = {
DataMembers: specificDataMembers,
AxisPoints: [specificSalesPerson, specificDate]
};
var underlyingData = [];
// Calls the RequestUnderlyingData method for the Card dashboard item with the specified parameters.
webDashboard.RequestUnderlyingData('cardDashboardItem1', requestParameters, 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);
}
$("#detailGrid").dxDataGrid({
height: 850,
scrolling: {
mode: 'virtual'
},
dataSource: underlyingData
});
});
}