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 ASPxClientDashboard API reduces flexibility when you configure the control. The DashboardControl underlies the ASPxClientDashboard object. The control provides access to all client settings and allows you to implement complex scenarios. We recommend that you use the DashboardControl API to configure the Web Dashboard on the client. More information: Client-Side Functionality.

The corresponding DashboardControl’s event: ViewerApiExtensionOptions.onItemClick.

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.

View Example

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();
    });
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ASPxDashboard_UnderlyingData.WebForm1" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="Scripts/UnderlyingData.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myPopup"></div>
        <div style="position:absolute; left:0; right:0; top:0; bottom:0;">               
            <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
                WorkingMode="Viewer" Height="100%" Width="100%" DashboardStorageFolder = "~/App_Data/Dashboards">
                <ClientSideEvents BeforeRender="onBeforeRender" />
            </dx:ASPxDashboard>
        </div>
    </form>
</body>
</html>

using System;

namespace ASPxDashboard_UnderlyingData {
    public partial class WebForm1 : System.Web.UI.Page {
    }
}

Imports System

Namespace ASPxDashboard_UnderlyingData

    Public Partial Class WebForm1
        Inherits Web.UI.Page

    End Class
End Namespace

<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" Inherits="ASPxDashboard_UnderlyingData.WebForm1" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="Scripts/UnderlyingData.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myPopup"></div>
        <div style="position:absolute; left:0; right:0; top:0; bottom:0;">               
            <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
                WorkingMode="Viewer" Height="100%" Width="100%" DashboardStorageFolder = "~/App_Data/Dashboards">
                <ClientSideEvents BeforeRender="onBeforeRender"/>
            </dx:ASPxDashboard>
        </div>
    </form>
</body>
</html>

Inherited Members

constructor

Inheritance

ASPxClientEventArgs

ASPxClientDashboardItemClickEventArgs

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
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(): ASPxClientDashboardItemData

Returns

Type	Description
ASPxClientDashboardItemData	A ASPxClientDashboardItemData object that represents the client data.

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.

View Example

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();
    };
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPxDashboard_ClientData.Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="Scripts/ClientData.js"></script>
    <style type="text/css">
        html, body, form {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myPopup"></div>
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" Width="100%" Height="100%" DashboardStorageFolder = "~/App_Data/Dashboards">
            <ClientSideEvents BeforeRender="onBeforeRender"/>
        </dx:ASPxDashboard>
    </form>
</body>
</html>

using System;

namespace ASPxDashboard_ClientData
{
    public partial class Default : System.Web.UI.Page
    {
    }
}

<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="ASPxDashboard_ClientData.Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="Scripts/ClientData.js"></script>
    <style type="text/css">
        html, body, form {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
        }
    </style>
</head>
<body>
     <form id="form1" runat="server">
        <div id="myPopup"></div>
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" Width="100%" Height="100%" DashboardStorageFolder = "~/App_Data/Dashboards">
            <ClientSideEvents BeforeRender="onBeforeRender"/>
        </dx:ASPxDashboard>
</form>
</body>
</html>

Imports System

Namespace ASPxDashboard_ClientData

    Public Partial Class [Default]
        Inherits Web.UI.Page

    End Class
End Namespace

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[]
): void

Parameters

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.