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
[Expand]End-User Documentation

Creating an ASP.NET Designer and Using It to Create a Dashboard

In this lesson, you will learn how to add ASPxDashboard to a Web application and create your first dashboard.

See Also

DevExpress Dashboards: Web Dashboard (YouTube)

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, leave 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 Steps 5-6. 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.

  2. Go to WebForm1.aspx and select the ASPxDashboard1 control added to a web page. In the Properties dialog, set the ASPxDashboard.DashboardStorageFolder property to ~/App_Data.

    This folder will contain XML definitions of the saved dashboards.

Expanded Step 7. Provide Data

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

    This connection string will be used to establish a connection to the Northwind database.

    Note

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

Expanded Steps 8-14. Create a Dashboard

  1. Build and run the project.

    Your web application should appear as follows.

    Click Create in the designer's surface.

  2. Click the Create Data Source... button to create a new data source.

  3. In the invoked Dashboard Data Source Wizard, select the created nwindConnection.

  4. On the next page, click Run Query Builder...

  5. In the invoked Query Builder, drag the SalesPerson view from the list of available tables/views on the right and drop it onto the surface of data tables to be used. Enable the *(All Columns) check box.

    Click OK.

  6. The Data Source wizard will display the generated query.

    Click Finish.

  7. Finally, click the Create button to create a dashboard with the newly created data source.

Expanded Steps 15-17. Create Dashboard Items

To create a dashboard item in the Web Dashboard, click the corresponding button in the Toolbox at the left of the page.

  1. Click the Chart button in the Toolbox to add a chart.

    Select the created Chart and click the link on its surface to bind it to data.

    Select the Add Values placeholder. Click the UnitPrice field to add it to the Values section. In the same way, place the CategoryName field to the Arguments section and the OrderDate field to the Series section.

  2. Click the Gauges button in the Toolbox to add gauges.

    Select the created Gauge and click the link on its surface to bind it to data.

    Select the Add Gauge placeholder. Click the UnitPrice field to add it to the Gauges section. In the same way, place the Country field to the Series section.

  3. Click the Card button in the Toolbox to add cards.

    Select the created Card and click the link on its surface to bind it to data.

    Select the Add Card placeholder. Click the UnitPrice field to add it to the Cards section. In the same way, place the CategoryName field to the Series section.

  4. The dashboard will look like this.

Expanded Step 18. Save the Dashboard

  1. Open the dashboard menu and click Save. The dashboard XML file will be saved to the previously created storage (App_Data).

    The dashboard file is now ready and you can present this dashboard in a viewer application. To do that, switch the ASPxDashboard.WorkingMode property to WorkingMode.Viewer or WorkingMode.ViewerOnly.

Expanded See Also

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