Access to Underlying Widgets

• Aug 03, 2020
• 6 minutes to read

Important

This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.

Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:

• ASPxDashboardViewer -> ASPxDashboard

  How to migrate from ASPxDashboardViewer to ASPxDashboard working in the ViewerOnly mode

• MVCxDashboardViewer -> MVCxDashboard

  How to migrate from DashboardViewerExtension to DashboardExtension working in the ViewerOnly mode

The Web Viewer uses DevExtreme widgets to visualize data within dashboard items. If necessary, you can access these widgets and customize their settings to add specific capabilities.

The ASPxClientDashboardViewer exposes the following events that allow you to access these widgets and customize their settings.

• The ASPxClientDashboardViewer.ItemWidgetCreated event is raised once for each widget when the dashboard is loaded to client. Handle this event to subscribe to events of the client widget.
• ASPxClientDashboardViewer.ItemWidgetUpdating/ASPxClientDashboardViewer.ItemWidgetUpdated events are raised when the client widget needs to be updated. For instance, this can be related to applying master filtering or changing parameter values. Handle the ASPxClientDashboardViewer.ItemWidgetUpdating event to unsubscribe from events of the client widget. To customize widgets according your requirements, handle the ASPxClientDashboardViewer.ItemWidgetUpdated event. This allows you to prevent the rewriting of customized options by the ASPxClientDashboardViewer.

The ASPxClientDashboardItemWidgetEventArgs.ItemName event parameter returns the component name of the dashboard item whose widget may be customized. Use the ASPxClientDashboardItemWidgetEventArgs.GetWidget method to access the corresponding underlying widget.

The following table lists dashboard items whose underlying widgets may be accessed when handling the ItemWidget… events.

Dashboard Item	Underlying Widget(s)
GridDashboardItem	dxDataGrid
ChartDashboardItem ScatterChartDashboardItem	dxChart
PieDashboardItem	an array of dxPieChart widgets
GaugeDashboardItem	an array of dxCircularGauge or dxLinearGauge widgets
MapDashboardItem	dxVectorMap
PivotDashboardItem	dxPivotGrid
ComboBoxDashboardItem	dxSelectBox or dxTagBox
ListBoxDashboardItem	dxList
TreeViewDashboardItem	dxTreeList Note Note that the dxTreeView widget is used in v17.1 and earlier.
TreemapDashboardItem	dxTreeMap
RangeFilterDashboardItem	dxRangeSelector
CardDashboardItem	CardWidget
TextBoxDashboardItem	n/a See Note
ImageDashboardItem	n/a See Note
CustomDashboardItem	n/a See Note

Note

The content of the TextBoxDashboardItem and ImageDashboardItem are an HTML element wrapped to a jQuery object.

Note

The CustomDashboardItem is a custom widget you can customize directly.

Limitations

Note that changing specific control settings may lead to various issues, thus changing the following settings is nor recommended:

• data binding settings;
• basic data presentation settings (for instance, a set of grid columns or chart series).

Note

Note that printed or exported documents containing a dashboard/dashboard item do not reflect appearance settings applied using the events meant for accessing underlying controls.

Example

This example demonstrates how to customize client widgets used to visualize data within dashboard items at runtime using ASPxClientDashboardViewer‘s API.

The following options are changed:

• Highlighting of the hovered grid row is enabled in the underlying dxDataGrid in the ASPxClientDashboardViewer.ItemWidgetCreated event handler.
• A standard tooltip that is invoked when an end-user hovers over a chart series point is disabled. You can invoke a tooltip by clicking the required label on the argument axis. The argumentAxisClick event is used for this purpose. Subscription and unsubscription to/from the argumentAxisClick event are performed in the ASPxClientDashboardViewer.ItemWidgetUpdated and ASPxClientDashboardViewer.ItemWidgetUpdating event handlers respectively.
• A pie legend is shown for the underlying dxPieChart.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-access-api-of-underlying-widgets-in-the-web-viewer-t197575.

WebForm1.aspx (VB.NET)

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

<%@ Register Assembly="DevExpress.Dashboard.v15.2.Web, Version=15.2.2.0, 
                       Culture=neutral, 
                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="webViewer"
            DashboardSource="~/App_Data/Dashboard.xml" Height="600px" Width="1200px" 
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection"  
            ClientSideEvents-ItemWidgetCreated="function(s, e) { customizeWidgets(e); }"  
            ClientSideEvents-ItemWidgetUpdated="function(s, e) { customizeWidgets(e); }"  
            ClientSideEvents-ItemWidgetUpdating="function(s, e) { unsubscribeFromEvents(e); }">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/WidgetsCustomization.js")%>">
</script>

WebForm1.aspx.vb

Imports System
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters

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

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub

        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "nwindConnection" Then

                ' Gets connection parameters used to establish a connection to the database.
                Dim parameters As Access97ConnectionParameters = CType(e.ConnectionParameters,  _
                    Access97ConnectionParameters)
                Dim databasePath As String = Server.MapPath("App_Data/nwind.mdb")

                ' Specifies the path to a database file.                    
                parameters.FileName = databasePath
            End If
        End Sub
    End Class
End Namespace

WidgetsCustomization.js (VB.NET)

function customizeWidgets(args) {
    if (args.ItemName == "gridDashboardItem1") {
        var grid = args.GetWidget();
        grid.option({
            hoverStateEnabled: true
        });
    }
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            tooltip: {
                enabled: false
            },
            onArgumentAxisClick: function (info) {
                info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
            }
        });
    }
    if (args.ItemName == "pieDashboardItem1") {
        var pie = args.GetWidget()[0];
        pie.option({
            legend: {
                visible: true,
                border: {
                    visible: true
                }
            }
        });
    }
}

function unsubscribeFromEvents(args) {
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            onArgumentAxisClick: undefined
        });
    }
}

WebForm1.aspx.cs

using System;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;

namespace Dashboard_WidgetAccess_Web {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "nwindConnection") {

                // Gets connection parameters used to establish a connection to the database.
                Access97ConnectionParameters parameters =
                    (Access97ConnectionParameters)e.ConnectionParameters;
                string databasePath = Server.MapPath("App_Data/nwind.mdb");

                // Specifies the path to a database file.                    
                parameters.FileName = databasePath;
            }
        }
    }
}

WebForm1.aspx (C#)

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

<%@ Register Assembly="DevExpress.Dashboard.v15.2.Web, Version=15.2.2.0, 
                       Culture=neutral, 
                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="webViewer"
            DashboardSource="~/App_Data/Dashboard.xml" Height="600px" Width="1200px" 
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection"  
            ClientSideEvents-ItemWidgetCreated="function(s, e) { customizeWidgets(e); }"  
            ClientSideEvents-ItemWidgetUpdated="function(s, e) { customizeWidgets(e); }"  
            ClientSideEvents-ItemWidgetUpdating="function(s, e) { unsubscribeFromEvents(e); }">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/WidgetsCustomization.js") %>">
</script>

WidgetsCustomization.js (C#)

function customizeWidgets(args) {
    if (args.ItemName == "gridDashboardItem1") {
        var grid = args.GetWidget();
        grid.option({
            hoverStateEnabled: true
        });
    }
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            tooltip: {
                enabled: false
            },
            onArgumentAxisClick: function (info) {
                info.component.getAllSeries()[0].getPointsByArg(info.argument)[0].showTooltip()
            }
        });
    }
    if (args.ItemName == "pieDashboardItem1") {
        var pie = args.GetWidget()[0];
        pie.option({
            legend: {
                visible: true,
                border: {
                    visible: true
                }
            }
        });
    }
}

function unsubscribeFromEvents(args) {
    if (args.ItemName == "chartDashboardItem1") {
        var chart = args.GetWidget();
        chart.option({
            onArgumentAxisClick: undefined
        });
    }
}