The example shows how to get underlying data for the specified dashboard item. Underlying data is displayed in the dxDataGrid widget placed next to the Web Dashboard.
The example uses the ViewerApiExtension.requestUnderlyingData method and passes the component name of the dashboard item and specific parameters to request data.
Files to Review
Documentation
- Client-Side API Overview for ASP.NET Core Dashboard
- Obtain Underlying and Displayed Data in the ASP.NET Core Dashboard Control
- Obtain Underlying and Displayed Data in Dashboard Control for JavaScript Applications
More Examples
- Dashboard for ASP.NET Core - How to obtain a dashboard item's client data
- Dashboard for ASP.NET Core - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for MVC - How to obtain a dashboard item's client data
- Dashboard for MVC - How to obtain underlying data for the specified dashboard item
- Dashboard for MVC - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for Web Forms - How to obtain a dashboard item's client data
- Dashboard for Web Forms - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for Web Forms - How to obtain underlying data for the specified dashboard item
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
AspNetCoreDashboard_UnderlyingData/wwwroot/js/UnderlyingData.js
JavaScriptfunction onDashboardEndUpdate(args) {
var dashboardControl = args.component;
// Gets client data displayed in the Card dashboard item.
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
var clientData = viewerApiExtension.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("Default").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("Sparkline").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.
viewerApiExtension.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
});
});
}
AspNetCoreDashboard_UnderlyingData/Pages/_Layout.cshtml
Razor<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Dashboard Web Application</title>
<link href="css/site.min.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<script src="js/site.min.js"></script>
<script src="js/UnderlyingData.js"></script>
</body>
</html>
AspNetCoreDashboard_UnderlyingData/Pages/Index.cshtml
Razor@page
<div id="detailGrid" style="position:absolute; left:800px; right:0; top:0; bottom:0;"></div>
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
@(Html.DevExpress().Dashboard("dashboardControl1")
.ControllerName("DefaultDashboard")
.Width("800px")
.Height("100%")
.WorkingMode(DevExpress.DashboardWeb.WorkingMode.ViewerOnly)
.OnDashboardEndUpdate("onDashboardEndUpdate")
)
</div>