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]ASP.NET Core 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
   Build End-User Dashboard Applications using the Template Gallery
  [Collapse]Build End-User Dashboard Designer Applications
    Create a WinForms Designer
    Create an ASP.NET Designer
    Create an ASP.NET MVC Designer
    Create an HTML5 JavaScript Designer
    Create an ASP.NET Core Designer (CTP)
  [Expand]Build End-User Dashboard Viewer Applications
  [Expand]Create a Dashboard in the Designer Application
   Create a Dashboard in Visual Studio
   Included Components
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Expand]Building the Designer and Viewer Applications
 [Expand]Creating Dashboards
 [Expand]Examples
 [Expand]Design-Time Features
  Video Tutorials
  End-User Documentation
  Localization
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Create an ASP.NET Designer

This tutorial shows how to create the Dashboard Designer web application using the ASPxDashboard control.

Expanded Steps 1-3. 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.

    Leave the default 'WebForm1' item name and click OK in the invoked dialog.

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

    Switch the web page to the Design view.

Expanded Steps 4-5. Create a Dashboard Storage

  1. Right-click the project in the Solution Explorer and select Add | Add ASP.NET Folder | App_Data from the context menu. Then, add the Dashboards folder inside App_Data.

  2. Click the control's smart tag and set Dashboard Storage Folder to the following relative path: ~/App_Data/Dashboards.

    This folder contains the saved dashboards' XML definitions.

Expanded Steps 6-7. Provide Data

  1. Right-click the App_Data folder, select Add | Existing Item and locate the nwind.mdb database using the following path:

    C:\Users\Public\Documents\DevExpress Demos 17.2\Components\Data\nwind.mdb

  2. Specify a connection string to the added database within the project's Web.config file as shown below.

    Note

    Note that the connection string should contain the XpoProvider parameter that depends on the used database type. For details on how to specify connection strings for different database types, see Register Default Data Connections.

Expanded Step 8. Add Required Client Libraries

  1. 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 9. Create a Dashboard

  1. The designer application is now ready. Build and run the project.

    Your application should look as follows:

    For instructions on how to create your first dashboard in the Web Designer, go to Create a Dashboard using the Web Dashboard.

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