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. Note that Mobile applications do not support Dashboard Views. 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.

Dashboard1

To begin this tutorial, open the FeatureCenter demo solution located in the %PUBLIC%\Documents\DevExpress Demos 18.2\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.

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.

DashboardTutorial1

Set the Id property of the created View to MyDashboardView.

DashboardTutorial1_1

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.

DashboardTutorial2

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

DashboardTutorial2_1

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.

DashboardTutorial2_2

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.

DashboardTutorial2_3

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.

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.

DashboardTutorial3

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.

DashboardTutorial4

Set the View property of the created View to MyDashboardView.

DashboardTutorial4_1

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

See Also