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
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Collapse]Views
    How to: Access Objects Selected in the Current View
    How to: Access the Master Object from a Nested List View
    How to: Create and Show a Detail View of the Selected Object in a Popup Window
    How to: Detect a Lookup List View in Code
    How to: Display a Detail View Directly in Edit Mode in ASP.NET Applications
    How to: Display a List View as a Chart
    How to: Display Several Views Side-by-Side
    How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Application
    How to: Implement a Singleton Business Object and Show its Detail View
    How to: Implement a View Item
    How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)
    How to: Show a Custom Data-Bound Control in an XAF View (WinForms)
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Expand]Miscellaneous UI Customizations
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Display Several Views Side-by-Side

This topic demonstrates how you can display several Views side-by-side on a single screen. For this purpose, the "Simple Dashboard" Dashboard View, demonstrated in the FeatureCenter Demo, installed with XAF, will be recreated from scratch. Dashboard Views are a special View type, designed specifically to display any number of unrelated Views in single Frame. If you need to display a List View together with the Detail View displaying the List View's currently selected object properties, in a Windows Forms XAF application, refer to the List View Edit Modes help topic instead.

To begin this tutorial, open the FeatureCenter demo solution located in the %PUBLIC%\Documents\DevExpress Demos 17.1\Components\eXpressApp Framework\FeatureCenter\CS folder, by default, and specify a valid database connection string for the Windows Forms application project. To learn how to specify connection strings, refer to the Connect an XAF Application to a Database Provider help topic.

Expanded Create a Dashboard View

First, create a Dashboard View that will be used to display several Views side-by-side. For this purpose, invoke the Model Editor for the FeatureCenter.Module.Win project. Right-click the Views node and add a Dashboard View.

Set the Id property of the created View to MyDashboardView.

Expanded Specify the Views to Be Displayed on the Dashboard View

Second, specify the Views to be displayed on the Dashboard View, by creating Dashboard View Items. A DashboardViewItem displays a View specified by the item's IModelDashboardViewItem.View property of the Application Model's corresponding DashboardViewItem node. Right-click the Items node and add a Dashboard View Item.

Set the View property of the created Dashboard View Item to Order_ListView_PivotGrid_SalesAnalysis.

Note

In the Feature Center application, the Order_ListView_PivotGrid_SalesAnalysis List View is visualized by the Pivot Grid List Editor (the List View's IModelListView.EditorType property is set to PivotGridListEditor for WinForms application and to ASPxPivotGridListEditor for ASP.NET in the Model Editor). Refer to the Pivot Grid Module topic to learn more.

Add another Dashboard View Item and set its View property to Order_ListView_Chart_Employees.

Add a KPI Dashboard View Item. Such items are used to display Key Performance Indicator results provided by the KPI Module. Set the KpiName property of the created item to Outdated shippings count.

Note that Dashboard Views support a wide range of View Items. So, a Dashboard View can display not only Views but images, blocks of text and Action Containers. For this purpose, you can add StaticText, StaticImage and ActionContainerViewItem View Items to the Dashboard View.

Expanded Configure the Dashboard View Layout

Third, configure the Dashboard View layout as you like. For a thorough explanation of how to customize a View layout, refer to the View Items Layout Customization help topic.

Expanded Create a Navigation Item

Finally, create a navigation item, so that users can invoke the created Dashboard View. Right-click the Items child node of the NavigationItems node and add a Navigation Item.

Set the View property of the created View to MyDashboardView.

Run the Windows Forms application, and you will be able to see the created Dashboard View in action.

Expanded See Also

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