Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Collapse]Dashboard
 [Collapse]Getting Started
   Creating a WinForms Designer and Using It to Create a Dashboard
   Creating a Dashboard at Design Time
   Creating an ASP.NET Designer and Using It to Create a Dashboard
   Creating an ASP.NET MVC Dashboard Designer Application
   Creating a WinForms Viewer and Using It to Display a Dashboard
   Creating an ASP.NET Viewer and Using It to Display a Dashboard
   Creating an ASP.NET MVC Viewer and Using It to Display a Dashboard
   Included Components
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Expand]Preparing the Designer and Viewer Applications
 [Expand]Creating Dashboards
 [Expand]Examples
  Video Tutorials
  End-User Capabilities
  Localization
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Creating an ASP.NET Viewer and Using It to Display a Dashboard

This document describes how to use the ASPxDashboard control to display the dashboard created in Creating an ASP.NET Designer and Using It to Create a Dashboard.

Expanded Steps 1-4. Add the Web Dashboard Control

  1. Run Visual Studio and create an ASP.NET Web Application. Next, select the Empty template and click OK.

  2. Add a new Web Form to the application. To do this, right-click the project in the Solution Explorer and select Add | Web Form.

    In the invoked dialog, use the default WebForm1 item name and click OK.

  3. Drag the ASPxDashboard control from the DX.17.1: Data & Analytics Toolbox tab and drop it onto the page.

    Switch the web page to the Design view.

  4. In the web application's Web.Config file, go to the devExpress section and add the "resources" section as shown below.

    This adds the required client libraries to the project, such as jquery, jquery-ui, knockout and globalize.

Expanded Step 5. Provide a Connection String

  1. To supply a dashboard with data, add a connection string specifying a valid connection to the database to the project's Web.config file as shown below.

    This connection string is used to establish a connection to the Northwind database.

Expanded Steps 6-8. Provide a Dashboard

  1. Right-click the project in the Solution Explorer and select Add | Add ASP.NET Folder | App_Data from the context menu.

  2. Add the dashboard XML file that you created in this lesson (dashboard1.xml). To do this, right-click the App_Data folder, select Add | Existing Item from the context menu, and locate the dashboard file in the invoked dialog.

  3. Go to WebForm1.aspx and select the ASPxDashboard1 control added to a web page. In the Properties dialog, locate the ASPxDashboard.DashboardXmlPath property and click the ellipsis button next to this property. In the invoked Select XML File dialog, go to the App_Data folder and select the dashboard1.xml file.

Expanded Steps 9-10. Specify a Working Mode and Run the Application

  1. In the Properties dialog, locate the ASPxDashboard.WorkingMode property and set it to ViewerOnly.

  2. Run the application to see the results.

How would you rate this topic?​​​​​​​