ASPxClientDashboard.ItemSelectionChanged Event

Occurs after the selection within the dashboard item is changed.

Namespace: DevExpress.DashboardWeb.Scripts

Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll

Declaration

C#

public event ASPxClientDashboardItemSelectionChangedEventHandler ItemSelectionChanged

VB.NET

Public Event ItemSelectionChanged As ASPxClientDashboardItemSelectionChangedEventHandler

Event Data

The ItemSelectionChanged event's data class is ASPxClientDashboardItemSelectionChangedEventArgs. The following properties provide information specific to this event:

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

The event data class exposes the following methods:

Method	Description
GetCurrentSelection()	Gets currently selected elements.

Remarks

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

• the state of master filter item is changed by an end-user or using ASPxClientDashboard‘s API;
• changing 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 the dashboard item for which the event was raised. Use the ASPxClientDashboardItemSelectionChangedEventArgs.GetCurrentSelection method to obtain the currently selected elements.

Example

The Web Dashboard allows you to add a custom interactivity to dashboards using the ASPxClientDashboard.ItemVisualInteractivity event. This example demonstrates the following capabilities.

• The Grid dashboard item allows you to select categories and visualize a corresponding product quantity using the dxBarGauge widget. Note that the hidden ‘Quantity’ measure is used to pass the required values to the client.
• The Chart dashboard item highlights bars corresponding to a hovered argument value.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxdashboard-how-to-add-custom-interactivity-to-a-dashboard-t495562.

CustomInteractivity.js

var defaultAxis = DashboardDataAxisNames.DefaultAxis,
    argumentAxis = DashboardDataAxisNames.ChartArgumentAxis;

function addCustomInteractivity(args) {
    if (args.ItemName == "gridDashboardItem1") {
        args.SetTargetAxes([defaultAxis]);
        args.SetSelectionMode("Multiple");
    }
    if (args.ItemName == "chartDashboardItem1") {
        args.SetTargetAxes([argumentAxis]);
        args.EnableHighlighting(true);
    }
}

function createControls() {
    $('#barGauge').dxBarGauge({
        startValue: 0,
        endValue: 10000,
        values: getAllValues(),
        label: {
            format: 'fixedPoint',
            precision: 0
        }
    });
}

function applyCurrentSelection(args) {
    var quantityValues = [];
    if (args.ItemName == "gridDashboardItem1" & args.GetCurrentSelection().length != 0) {
        var clientData = webViewer.GetItemData("gridDashboardItem1");
        for (var i = 0; i < args.GetCurrentSelection().length; i++) {
            var currentTuple = args.GetCurrentSelection()[i],
                slice = clientData.GetSlice(currentTuple.GetAxisPoint()),
                quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
            quantityValues.push(quantity);
        }
    } else {
        quantityValues = getAllValues();
    }
    $('#barGauge').data("dxBarGauge").values(quantityValues);
}

function getAllValues() {
    var quantityValues = [],
        clientData = webViewer.GetItemData("gridDashboardItem1");
    for (var i = 0; i < clientData.GetAxis(defaultAxis).GetPoints().length; i++) {
        var slice = clientData.GetSlice(clientData.GetAxis(defaultAxis).GetPoints()[i]),
            quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
        quantityValues.push(quantity);
    }
    return quantityValues;
}

WebForm1.aspx (C#)

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

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.1.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
    <div style="display: inline-block; float: left;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Height="600px" Width="800px"
            WorkingMode="Viewer"          
            ClientInstanceName="webViewer" 
            ClientSideEvents-DashboardEndUpdate="function() { createControls(); }"
            ClientSideEvents-ItemSelectionChanged="function(s, e) { applyCurrentSelection(e); }" 
            ClientSideEvents-ItemVisualInteractivity = "function(s, e) { addCustomInteractivity(e); }">
        </dx:ASPxDashboard>
    </div>
    <div id="barGauge" style="display: inline-block; float: left; width: 600px; height: 600px;"></div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/CustomInteractivity.js") %>"></script>

WebForm1.aspx.cs

using DevExpress.DashboardWeb;
using System;

namespace ASPxDashboard_CustomVisualInteractivity
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ASPxDashboard1.SetDashboardStorage(new DashboardFileStorage(Server.MapPath("App_Data/Dashboards")));
        }
    }
}

WebForm1.aspx.vb

Imports DevExpress.DashboardWeb
Imports System

Namespace ASPxDashboard_CustomVisualInteractivity
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ASPxDashboard1.SetDashboardStorage(New DashboardFileStorage(Server.MapPath("App_Data/Dashboards")))
        End Sub
    End Class
End Namespace

WebForm1.aspx (VB.NET)

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

<%@ Register Assembly="DevExpress.Dashboard.v17.1.Web, Version=17.1.1.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
    <div style="display: inline-block; float: left;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Height="600px" Width="800px"
            WorkingMode="Viewer"          
            ClientInstanceName="webViewer" 
            ClientSideEvents-DashboardEndUpdate="function() { createControls(); }"
            ClientSideEvents-ItemSelectionChanged="function(s, e) { applyCurrentSelection(e); }" 
            ClientSideEvents-ItemVisualInteractivity = "function(s, e) { addCustomInteractivity(e); }">
        </dx:ASPxDashboard>
    </div>
    <div id="barGauge" style="display: inline-block; float: left; width: 600px; height: 600px;"></div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/CustomInteractivity.js")%>"></script>