How to: Bind a Dashboard to a DataSet at Design Time and Provide Data at Runtime

Aug 03, 2020
3 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 tutorial shows how to create the data source by specifying a schema using an XML/XSD file or a data class at Visual Studio design time.

To create a new data source, click the Add button in the Data Sources dialog and select XML Schema.

Click Next.
On the next page, locate the XML/XSD file or specify a data class to provide a data source schema. Click Finish.
The invoked Data Sources dialog will contain the created data source.
Type the required DataMember manually to retrieve the data source fields…

… and click OK to add the created data source to the collection of dashboard data sources.
Finally, to provide actual data for the created data source, create a data source object instance in code and assign it to the ObjectDataSource.DataSource property of the DashboardObjectDataSource object or handle the Dashboard.DataLoading event to provide data at runtime.

The following example demonstrates how to bind a dashboard to a DataSet at design time and fill it with data from the SalesPerson table in the Northwind database.

In this example, the dashboard is created at design time within Visual Studio and displayed in the ASPxDashboardViewer. The dataset is filled with data in the Dashboard.DataLoading event handler.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-a-dashboard-to-a-dataset-at-design-time-and-provide-data-at-runtime-e5160.

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

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.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" FullscreenMode=true
            DashboardSource="<%#GetType(Dashboard_DataLoading.Dashboard1)%>">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

Imports System
Imports Dashboard_DataLoading.nwindDataSetTableAdapters
Imports DevExpress.DashboardCommon

Namespace Dashboard_DataLoading
    Partial Public Class Dashboard1
        Inherits DevExpress.DashboardCommon.Dashboard

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Dashboard1_DataLoading(ByVal sender As Object, ByVal e As DashboardDataLoadingEventArgs) _
            Handles MyBase.DataLoading
            Dim categories As New SalesPersonTableAdapter()
            categories.Fill(Me.nwindDataSet1.SalesPerson)
            If e.DataSource.ComponentName = "dashboardObjectDataSource1" Then
                e.Data = Me.nwindDataSet1.SalesPerson
            End If
        End Sub
    End Class
End Namespace

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

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.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" FullscreenMode=true
            DashboardSource="<%# typeof(Dashboard_DataLoading.Dashboard1) %>">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

using System;
using Dashboard_DataLoading.nwindDataSetTableAdapters;
using DevExpress.DashboardCommon;

namespace Dashboard_DataLoading {
    public partial class Dashboard1 : DevExpress.DashboardCommon.Dashboard {
        public Dashboard1() {
            InitializeComponent();
        }

        private void Dashboard1_DataLoading(object sender, DashboardDataLoadingEventArgs e) {
            SalesPersonTableAdapter categories = new SalesPersonTableAdapter();
            categories.Fill(this.nwindDataSet1.SalesPerson);
            if (e.DataSource.ComponentName == "dashboardObjectDataSource1") {
                e.Data = this.nwindDataSet1.SalesPerson;
            }
        }
    }
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode