How to: Access API of Underlying Widgets in the Web Viewer
- 4 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
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)
- WebForm1.aspx.vb
- WidgetsCustomization.js (VB.NET)
- WebForm1.aspx.cs
- WebForm1.aspx (C#)
- WidgetsCustomization.js (C#)
<%@ 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>