ASPxClientDashboardItemClickEventArgs Class
Provides data for the ASPxClientDashboard.ItemClick event.
#Declaration
declare class ASPxClientDashboardItemClickEventArgs extends ASPxClientEventArgs
#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.
Warning
A use of ASPx
API reduces flexibility when you configure the control. The DashboardASPx
object. The control provides access to all client settings and allows you to implement complex scenarios. We recommend that you use the Dashboard
API to configure the Web Dashboard on the client. More information: Client-Side Functionality.
The corresponding Dashboard
#Example
The following example uses the DashboardControl‘s client-side API to get underlying data that corresponds to a particular visual element.
In this example, the ViewerApiExtensionOptions.onItemClick event is handled to obtain underlying data and invoke the dxPopup
widget with the child dxDataGrid
. In the event handler, the e.requestUnderlyingData method returns records from the dashboard’s data source. The dxDataGrid displays these records.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
if (viewerApiExtension)
viewerApiExtension.on('itemClick', onItemClick);
$("#myPopup").dxPopup({
width: 800, height: 600,
title: "Underlying data",
showCloseButton: true
});
}
function onItemClick(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();
});
}
#Inherited Members
#Inheritance
#Properties
#ItemName Property
Gets the name of the dashboard item for which the event has been raised.
#Declaration
ItemName: string
#Property 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
): ASPxClientDashboardItemDataAxisPoint
#Parameters
Name | Type | Description |
---|---|---|
axis |
string | A string value returned by the Dashboard |
#Returns
Type | Description |
---|---|
ASPx |
An ASPx |
#GetData Method
Gets the dashboard item’s client data.
#Declaration
GetData(): ASPxClientDashboardItemData
#Returns
Type | Description |
---|---|
ASPx |
A ASPx |
#Example
The following example uses the DashboardControl‘s client-side API to obtain client data that corresponds to a particular visual element.
The ViewerApiExtensionOptions.onItemClick event is handled to obtain client data and invoke the dxPopup
component with the dxChart
.
In the event handler, the e.getData method call obtains dashboard item’s client data. The e.getAxisPoint method returns the axis point corresponding to the clicked card while the ItemData.getSlice method returns the slice of client data by this axis point.
The ItemDataAxis.getPoints method is used to obtain axis points that belongs to the “Sparkline” data axis. Corresponding actual/target values are obtained using the ItemData.getDeltaValue method.
When you click a card, the dxChart
displays the detailed chart and shows a variation of actual/target values over time.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
if (viewerApiExtension)
viewerApiExtension.on('itemClick', onItemClick);
$("#myPopup").dxPopup({
width: 800, height: 600,
title: "Details",
showCloseButton: true
});
}
function onItemClick(args) {
if (args.itemName == "cardDashboardItem1") {
var clientData = [],
clientDataTable = [],
clickedItemData,
delta;
var sparklineAxis = "Sparkline",
defaultAxis = "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();
};
}
#GetDeltas Method
Gets deltas corresponding to the clicked visual element.
#Declaration
GetDeltas(): ASPxClientDashboardItemDataDelta[]
#Returns
Type | Description |
---|---|
ASPx |
An array of ASPx |
#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 |
---|---|---|
axis |
string | A string value returned by the Dashboard |
#Returns
Type | Description |
---|---|
ASPx |
An array of ASPx |
#GetMeasures Method
Gets measures corresponding to the clicked visual element.
#Declaration
GetMeasures(): ASPxClientDashboardItemDataMeasure[]
#Returns
Type | Description |
---|---|
ASPx |
An array of ASPx |
#RequestUnderlyingData(onCompleted, dataMembers) Method
Requests underlying data corresponding to the clicked visual element.
#Declaration
RequestUnderlyingData(
onCompleted: ASPxClientDashboardItemRequestUnderlyingDataCompleted,
dataMembers: string[]
): void
#Parameters
Name | Type | Description |
---|---|---|
on |
ASPx |
A ASPx |
data |
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.