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 a WinForms Designer and Using It to Create a Dashboard

This lesson will guide you through creating your first dashboard using the WinForms Dashboard Designer.

Begin by making a simple designer application using the DashboardDesigner control. Then, use this application to establish a connection to a database and design a dashboard.

See Also

DevExpress Dashboards: Creating a Dashboard (YouTube)

Expanded Steps 1-5. Create a Designer Application

  1. Open Microsoft 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.
  2. Drag the DashboardDesigner control from the DX.17.1: Data & Analytics Toolbox tab and drop it onto the main form.

    Important

    Note that the DashboardDesigner control does not support .NET Framework 4.0 Client Profile. To learn how to target a version of the .NET Framework, see How to: Target a Version of the .NET Framework.

  3. Click the control's smart tag button and select Dock in Parent Container in the invoked actions list to let the DashboardDesigner fill the entire form.

  4. In the same menu, click Create Ribbon. This will create a Ribbon control with predefined commands around the DashboardDesigner.

    Note

    For a better Ribbon presentation, derive your main form from the RibbonForm class instead of System.Windows.Forms.Form.

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

    Your application should appear as follows.

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

  1. Click New in the Ribbon. This creates a new dashboard and runs the Data Source wizard.

  2. On the first page, select Database and click Next.

  3. 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.

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

  5. 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.

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

    Click Finish to create the data source.

Expanded Steps 12-14. Create Dashboard Items and Bind them to Data

  1. Click the Gauges button in the Ribbon to add gauges.

    Drag the Extended Price field from the Data Source Browser to the "Actual" placeholder in the Gauges section.

    Then, drag the Country field to the Series section.

  2. Click the Chart button in the Ribbon to add a chart.

    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. Click the Cards button in the Ribbon to add cards.

    Drag the Extended Price field to the "Actual" placeholder in the Cards section. Then, place the Sales Person field in the Series section.

    The dashboard will look like this.

Expanded Step 15. Save the Dashboard

  1. Click Save in the Ribbon and select a destination to save the dashboard XML file.

    The dashboard file is now ready. You can display the created dashboard in a WinForms application using the DashboardViewer control. To embed a dashboard to a web application, use the ASPxDashboard control.

Expanded See Also

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