The requested page is not available for the requested platform. You are viewing the content for Default platform.

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.

Examples

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.

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

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.

Examples

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.

See Also

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.

See Also

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.

See Also