How to: Load a Dashboard at Runtime to a Web Viewer

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:

The following example demonstrates how to load a dashboard at runtime using the ASPxDashboardViewer.DashboardLoading event.

In this example, the ASPxDashboardViewer.DashboardId property is set at first to introduce a unique dashboard identifier. Then the ASPxDashboardViewer.DashboardLoading event is handled to load the dashboard XML definition. Its DashboardLoadingEventArgs.DashboardId parameter is used to get the identifier of the required dashboard. The DashboardLoadingEventArgs.DashboardXml property is used to specify the dashboard XML definition as a string.

The ASPxDashboardViewer.ConfigureDataConnection event is handled to provide connection settings before the Dashboard Viewer connects to the database. The FileConnectionParametersBase.FileName property is used to set the path to the database file.

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

<%@ Register assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.3.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>

    </div>
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
        ondashboardloading="ASPxDashboardViewer1_DashboardLoading" 
        onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection" 
        Height="800px" Width="1200px">
    </dx:ASPxDashboardViewer>
    </form>
</body>
</html>
See Also