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
  [Expand]Build End-User Dashboard Designer Applications
  [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 a Dashboard in Visual Studio

This tutorial shows how to create a dashboard at design time within Visual Studio and display this dashboard in the WinForms Dashboard Viewer.

Expanded Steps 1-5. Create a New Project and Add a Dashboard

  1. Run Visual Studio and create a new Windows Forms Application.

  2. Drag the DashboardViewer control from the DX.17.2: Data & Analytics Toolbox tab and drop it onto the main form.

    Important

    Note that the DashboardViewer control does not support .NET Framework 4.0 Client Profile. See How to: Target a Specific .NET Framework Version to learn how to target a specific .NET Framework version.

  3. Click the control's smart tag button and select Dock in Parent Container to allow the DashboardViewer to fill the entire window.

  4. In the same menu, click Create Dashboard.

  5. Visual Studio displays the designer for the newly created dashboard.

    Note

    Alternatively, you can create a dashboard in Visual Studio using the DevExpress Template Gallery. To do this, right-click the project in the Solution Explorer and select Add DevExpress Item | New Item... Select Dashboard and click Add Item in the invoked DevExpress Template Gallery.

Expanded Steps 6-15. Connect to a Database and Select Data

  1. To add a dashboard data source, click Edit Data Sources... on the dashboard surface.

  2. Click Add | Dashboard Data Source to add a new data source in the invoked Data Sources dialog.

  3. On the first Data Source page, select Database and click Next.

  4. On the next page, select No, I'd like to specify the connection parameters myself and click Next.

  5. Now specify the data connection parameters. Select the Microsoft Access 97 data provider and specify the database path in the Database field:

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

    Click Next.

  6. On the next page, leave the default settings and click Next.

  7. On the final page, click the Run Query Builder... button to run the Query Builder and select the required data.

  8. In the invoked Query Builder, drag and drop the SalesPerson view from the Tables pane onto the Design pane...

    ...and check the (All Columns) checkbox.

    Click OK.

  9. The Data Source Wizard displays the generated query.

    Click Finish to create the data source.

  10. The Data Sources dialog displays the created data source and its properties. Click OK.

Expanded Steps 16-19. Add Dashboard Items and Bind them to Data

  1. To add dashboard items, open the Toolbox and drag them onto the dashboard.

    First, add the Gauge dashboard item to the dashboard. Select Dashboard | Field List and drag the Extended Price field onto the "Actual" placeholder in the Gauges section.

    Then, drag the Country field to the Series section.

  2. Add the Chart to the dashboard and drag the Extended Price field onto the Values section, the CategoryName field onto the Arguments section and the OrderDate field onto the Series section.

  3. Finally, add the Cards dashboard item. Drag the Extended Price field onto the "Actual" placeholder in the Cards section and place the Sales Person field in the Series section.

  4. The dashboard should look as follows in Visual Studio:

    Run the application and see how DashboardViewer displays the resulting dashboard.

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