ASPxClientDashboardItemClickEventArgs Class
Provides data for the ASPxClientDashboard.ItemClick event.
Declaration
declare class ASPxClientDashboardItemClickEventArgs extends ASPxClientEventArgsRemarks
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.
- 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
});
}
Inherited Members
Inheritance
Properties
ItemName Property
Gets the name of the dashboard item for which the event has been raised.
Declaration
ItemName: stringProperty Value
| Type | Description |
|---|---|
| string | A string value that is the dashboard item name. |
Methods
GetAxisPoint(axisName) Method
Returns the axis point corresponding to the clicked visual element.
Declaration
GetAxisPoint(
axisName: string
): ASPxClientDashboardItemDataAxisPointParameters
| Name | Type | Description |
|---|---|---|
| axisName | string | A string value returned by the DashboardDataAxisNames class that specifies the name of the data axis. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataAxisPoint | An ASPxClientDashboardItemDataAxisPoint object that is the axis point. |
GetData Method
Gets the dashboard item’s client data.
Declaration
GetData(): ASPxClientDashboardItemDataReturns
| Type | Description |
|---|---|
| ASPxClientDashboardItemData | A ASPxClientDashboardItemData object that represents the client data. |
Example
The following example demonstrates how to obtain client data corresponding to a particular visual element using ASPxDashboard‘s client-side API. In this example, the ASPxClientDashboard.ItemClick event is handled to obtain client data and invoke the dxPopup widget with the child dxChart.
In the event handler, the ASPxClientDashboardItemClickEventArgs.GetData method is called to obtain dashboard item’s client data. The ASPxClientDashboardItemClickEventArgs.GetAxisPoint method returns the axis point corresponding to the clicked card while the ASPxClientDashboardItemData.GetSlice method returns the slice of client data by this axis point. To obtain axis points belonging to the “Sparkline” data axis, the ASPxClientDashboardItemDataAxis.GetPoints method is used. Corresponding actual/target values are obtained using the ASPxClientDashboardItemData.GetDeltaValue method.
The dxChart is used to display the detailed chart showing a variation of actual/target values over time.
function getClientData(args) {
if (args.ItemName == "cardDashboardItem1") {
var clientData = [],
clientDataTable = [],
clickedItemData,
delta;
var sparklineAxis = DashboardDataAxisNames.SparklineAxis,
defaultAxis = DashboardDataAxisNames.Default;
clientData = args.GetData();
clickedPoint = args.GetAxisPoint(defaultAxis);
clickedItemData = clientData.GetSlice(clickedPoint);
delta = args.GetDeltas()[0];
for (var i = 0; i < clickedItemData.GetAxis(sparklineAxis).GetPoints().length; i++) {
var dataTableRow = {},
axisPoint = clickedItemData.GetSlice(clickedItemData.GetAxis(sparklineAxis).GetPoints()[i]);
dataTableRow["Argument"] = clickedItemData.GetAxis(sparklineAxis).GetPoints()[i].GetValue();
if (axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue() != null &&
axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue() != null) {
dataTableRow["Actual"] = axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue();
dataTableRow["Target"] = axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue();
}
else {
dataTableRow["Actual"] = 0;
dataTableRow["Target"] = 0;
}
clientDataTable.push(dataTableRow);
}
var $chart = $('<div/>');
$chart.dxChart({
height: 500,
dataSource: clientDataTable,
series: [{
valueField: 'Actual', name: 'Actual'
}, {
valueField: 'Target', name: 'Target'
}
],
commonSeriesSettings: {
type: 'splineArea',
argumentField: 'Argument',
ignoreEmptyPoints: true
},
argumentAxis: {
showZero: false,
type: 'discrete'
},
valueAxis: {
showZero: false,
type: 'continuous',
label: { format: 'currency' }
}
});
var popup = $("#myPopup").data("dxPopup");
popup.option('title', clickedPoint.GetValue() + " - Details");
$popupContent = popup.content();
$popupContent.empty();
$popupContent.append($chart);
popup.show();
};
}
function initPopup() {
$("#myPopup").dxPopup({
width: 800, height: 600,
title: "Details",
showCloseButton: true
});
}
GetDeltas Method
Gets deltas corresponding to the clicked visual element.
Declaration
GetDeltas(): ASPxClientDashboardItemDataDelta[]Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataDelta[] | An array of ASPxClientDashboardItemDataDelta objects containing the delta metadata. |
GetDimensions(axisName) Method
Gets the dimensions used to create a hierarchy of axis points for the specified axis.
Declaration
GetDimensions(
axisName: string
): ASPxClientDashboardItemDataDimension[]Parameters
| Name | Type | Description |
|---|---|---|
| axisName | string | A string value returned by the DashboardDataAxisNames class that specifies the name of the data axis. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataDimension[] | An array of ASPxClientDashboardItemDataDimension objects that contain the dimension metadata. |
GetMeasures Method
Gets measures corresponding to the clicked visual element.
Declaration
GetMeasures(): ASPxClientDashboardItemDataMeasure[]Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataMeasure[] | An array of ASPxClientDashboardItemDataMeasure objects that contain the measure metadata. |
RequestUnderlyingData(onCompleted, dataMembers) Method
Requests underlying data corresponding to the clicked visual element.
Declaration
RequestUnderlyingData(
onCompleted: ASPxClientDashboardItemRequestUnderlyingDataCompleted,
dataMembers: string[]
): voidParameters
| Name | Type | Description |
|---|---|---|
| onCompleted | ASPxClientDashboardItemRequestUnderlyingDataCompleted | A ASPxClientDashboardItemRequestUnderlyingDataCompleted object that references a method executed after the request is completed. |
| dataMembers | string[] | (Optional) An array of string values that specify data members used to obtain underlying data. If this parameter is not specified, underlying data for all available data members will be requested. |
Remarks
Note that the RequestUnderlyingData method does not return data for calculated fields containing the Aggr function.