ASPxClientDashboardItemSelectionChangedEventArgs Class

Provides data for the ASPxClientDashboard.ItemSelectionChanged event.

Declaration

declare class ASPxClientDashboardItemSelectionChangedEventArgs extends ASPxClientEventArgs

Remarks

The ASPxClientDashboard.ItemSelectionChanged event is raised after the selection within the dashboard item is changed. You can change the selection in the following ways:

• Change the state of master filter item by an end-user or with the ASPxClientDashboard‘s API (for instance, the ASPxClientDashboard.SetMasterFilter or ASPxClientDashboard.ClearMasterFilter methods);
• Change the selection within the dashboard item for which a custom visual interactivity is provided (using the ASPxClientDashboard.ItemVisualInteractivity event).

The ASPxClientDashboardItemSelectionChangedEventArgs.ItemName property returns the name of dashboard item for which the event was raised. Use the GetCurrentSelection method to obtain currently selected elements.

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.onItemSelectionChanged.

Example

The Web Dashboard allows you to add custom interactivity to dashboards. For this, handle the ViewerApiExtensionOptions.onItemVisualInteractivity event. You can get data axes used to apply custom interactivity actions, specify the selection mode for dashboard item elements and so on. Use event arguments to process the multidimensional data to get the slice, axes, or tuples.

The change of the selection in the dashboard item raises the ViewerApiExtensionOptions.onItemSelectionChanged event.

• Select categories in the Grid dashboard item to visualize its quantity in the dxBarGauge widget. The hidden ‘Quantity’ measure is used to pass values to the client.

  

• The Chart dashboard item highlights bars corresponding to a hovered argument value.

  

View Example: ASP.NET Core

CustomInteractivity.js

var dimensionValues = [];

function onBeforeRender(dashboardControl) {
    if (dashboardControl) {
        dashboardControl.on('dashboardEndUpdate', createControls);
        var viewerApiExtension = dashboardControl.findExtension("viewerApi");
    }
    if (viewerApiExtension) {
        viewerApiExtension.on('itemVisualInteractivity', addCustomInteractivity);
        viewerApiExtension.on('itemSelectionChanged', applyCurrentSelection);
    }
}

function addCustomInteractivity(args) {
    if (args.itemName == "gridDashboardItem1") {
        args.setTargetAxes(["Default"]);
        args.setSelectionMode("Multiple");
    }
    if (args.itemName == "chartDashboardItem1") {
        args.setTargetAxes(["Argument"]);
        args.enableHighlighting(true);
    }
}

function createControls() {
    $('#barGauge').dxBarGauge({
        startValue: 0,
        endValue: 10000,
        values: getAllValues(),
        title: {
            text: "Product Quantity",
            font: {
                size: 28,
            }
        },
        label: {
            format: 'fixedPoint',
            precision: 0
        },
        tooltip: {
            enabled: true,
            customizeTooltip(arg) {
                return {
                    text: getText(dimensionValues[arg.index], arg.value),
                };
            },
        },
        legend: {
            visible: true,
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center',
            customizeText(arg) {
                return getText(dimensionValues[arg.item.index], arg.text);
            }
        }
    });
}

function getText(item, text) {
    return `${item} - ${text}`    
}

function applyCurrentSelection(args) {
    var quantityValues = [];
    dimensionValues = [];
    if (args.itemName == "gridDashboardItem1" & args.getCurrentSelection().length != 0) {
        var viewerApiExtension = dashboardControl.findExtension('viewerApi');
        var clientData = viewerApiExtension.getItemData("gridDashboardItem1");
        for (var i = 0; i < args.getCurrentSelection().length; i++) {
            var dimensionValue = args.getCurrentSelection()[i].getAxisPoint().getValue();
            var currentTuple = args.getCurrentSelection()[i],
                slice = clientData.getSlice(currentTuple.getAxisPoint()),
                quantity = (slice.getMeasureValue(clientData.getMeasures()[0].id)).getValue();            
            quantityValues.push(quantity);
            dimensionValues.push(dimensionValue);
        }
    } else {
        quantityValues = getAllValues();
    }
    $("#barGauge").dxBarGauge("instance").values(quantityValues);
}

function getAllValues() {
    var viewerApiExtension = dashboardControl.findExtension('viewerApi');
    dimensionValues = [];
    var quantityValues = [];
    var   clientData = viewerApiExtension.getItemData("gridDashboardItem1");
    for (var i = 0; i < clientData.getAxis("Default").getPoints().length; i++) {
        var slice = clientData.getSlice(clientData.getAxis("Default").getPoints()[i]),
            quantity = (slice.getMeasureValue(clientData.getMeasures()[0].id)).getValue(),
            dimensionValue = clientData.getAxis("Default").getPoints()[i].getValue();        
        quantityValues.push(quantity);
        dimensionValues.push(dimensionValue);
    }
    return quantityValues;
}

Index.cshtml

@page
@using DevExpress.DashboardWeb

<div style="display: inline-block; float: left;">
@(Html.DevExpress().Dashboard("dashboardControl")
    .ControllerName("DefaultDashboard")
    .Width("600px")
    .Height("750px")
    .OnBeforeRender("onBeforeRender")
    .WorkingMode(WorkingMode.Viewer)
)
</div>

<div id="barGauge" style="display: inline-block; float: left; width: 600px; height: 375px;"></div>

Inherited Members

constructor

Inheritance

ASPxClientEventArgs

ASPxClientDashboardItemSelectionChangedEventArgs

Properties

ItemName Property

Gets the component name of the dashboard item for which the event was raised.

Declaration

ItemName: string

Property Value

Type	Description
string	A string that is the component name of the dashboard item.

Methods

GetCurrentSelection Method

Gets currently selected elements.

Declaration

GetCurrentSelection(): ASPxClientDashboardItemDataAxisPointTuple[]

Returns

Type	Description
ASPxClientDashboardItemDataAxisPointTuple[]	An array of ASPxClientDashboardItemDataAxisPointTuple objects corresponding to the selected elements.