Log In
[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]Report Server
 [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
  Video Tutorials
  End-User Capabilities
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Creating a Dashboard at Design Time

In this lesson, you will create a dashboard at design time within Visual Studio.

See Also

DevExpress Dashboards: Visual Studio IDE Integration (YouTube)

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

  1. Open Visual Studio and create a new Windows Forms Application project by selecting File | New | Project… in the main menu. In the invoked New Project window, select Windows Forms Application and specify the name of the project.

    You can also create a new dashboard within an ASP.NET Web Application.

  2. To add a dashboard, right-click the project in the Solution Explorer and select Add DevExpress Item | New Item...

    In the invoked DevExpress Template Gallery, select the WinForms category and select Dashboard.

    Leave the default item name and click Add Item.

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

Expanded Steps 4-13. Connect to a Database and Select Data

  1. In this example, a dashboard will be bound to data from the Sales Person view of the Northwind database.

    To create a data source and assign it to a dashboard at design time, select Dashboard | Edit Data Sources.

  2. In the invoked Data Sources dialog, click Add | Dashboard Data Source to add a new data source.

    This invokes the Data Source wizard, which allows you to bind to data.

  3. On the first 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 data connection parameters. Select the Microsoft Access 97 data provider and specify the following path to the database in the Database field.

    C:\Users\Public\Documents\DevExpress Demos 17.1\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 Query Builder and select the required data.

  8. In the invoked Query Builder, drag and drop the SalesPerson view from Tables Pane on the left to Design Pane...

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

    Click OK.

  9. The Data Source Wizard will display the generated query.

    Click Finish to create the data source.

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

Expanded Steps 14-17. Add Dashboard Items and Bind them to Data

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

    First, add the Gauge dashboard item to the dashboard. Select DASHBOARD | Field List and drag the Extended Price field to 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 to the Values section, the CategoryName field to the Arguments section and the OrderDate field to the Series section.

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

  4. Build the solution. The dashboard is now ready.

    It can be opened using the DashboardViewer or ASPxDashboard controls, and displayed in a viewer application.

Expanded See Also

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