ASPxClientDashboardItemClickEventArgs Class
Provides data for the ASPxClientDashboard.ItemClick / ASPxClientDashboardViewer.ItemClick events.
Namespace: DevExpress.DashboardWeb.Scripts
Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll
Declaration
Remarks
Use the ASPxClientDashboardItemClickEventArgs.ItemName property to obtain the dashboard item name for which the event has been raised.
The ASPxClientDashboardItemClickEventArgs.GetAxisPoint allows you to obtain the axis point corresponding to the clicked visual element. Use the ASPxClientDashboardItemClickEventArgs.RequestUnderlyingData method to request the underlying data related to this visual element.
The ASPxClientDashboardItemClickEventArgs.GetData method returns the client data for this dashboard item.
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.
- UnderlyingData.js (C#)
- WebForm1.aspx (C#)
- WebForm1.aspx.cs
- WebForm1.aspx.vb
- WebForm1.aspx (VB.NET)
- UnderlyingData.js (VB.NET)
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
});
}