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

Aug 03, 2020
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

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.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-load-a-dashboard-at-runtime-using-web-viewer-e4761.

<%@ 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>

using System;
using System.IO;
using DevExpress.DataAccess.ConnectionParameters;

namespace Dashboard_DashboardLoading {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            // Specifies the dashboard identifier.
            ASPxDashboardViewer1.DashboardId = "SalesDashboard";
        }

        // Handles the DashboardLoading event.
        protected void ASPxDashboardViewer1_DashboardLoading(object sender, 
            DevExpress.DashboardWeb.DashboardLoadingEventArgs e) {

            // Checks the identifier of the required dashboard.
            if (e.DashboardId == "SalesDashboard") {

                // Writes the dashboard XML definition from a file to a string.
                string definitionPath = Server.MapPath("App_Data/SalesDashboard.xml");                
                string dashboardDefinition = File.ReadAllText(definitionPath);    

                // Specifies the dashboard XML definition.
                e.DashboardXml = dashboardDefinition;
            }
        }

        // Handles the ConfigureDataConnection event.
        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            DevExpress.DashboardWeb.ConfigureDataConnectionWebEventArgs e) {
                if (e.DataSourceName == "SQL Data Source 1") {

                    // 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;
            }
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
         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>

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

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

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Specifies the dashboard identifier.
            ASPxDashboardViewer1.DashboardId = "SalesDashboard"
        End Sub

        ' Handles the DashboardLoading event.
        Protected Sub ASPxDashboardViewer1_DashboardLoading(ByVal sender As Object, _
                                           ByVal e As DashboardLoadingEventArgs)

            ' Checks the identifier of the required dashboard.
            If e.DashboardId = "SalesDashboard" Then

                ' Writes the dashboard XML definition from a file to a string.
                Dim definitionPath As String = Server.MapPath("App_Data/SalesDashboard.xml")
                Dim dashboardDefinition As String = File.ReadAllText(definitionPath)

                ' Specifies the dashboard XML definition.
                e.DashboardXml = dashboardDefinition
            End If
        End Sub

        ' Handles the ConfigureDataConnection event.
        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.DataSourceName = "SQL Data Source 1" 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

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode