Display a Detail View with a List View

In this lesson, you will learn how to display a Detail View together with a List View. For this purpose, the Department List View will be used. The object selected in it will be displayed in the corresponding Detail View.

Note

Before proceeding, take a moment to review the Place an Action in a Different Location lesson.

Invoke the Model Editor for the MySolution.Module project. Navigate to the Views | MySolution.Module.BusinessObjects | Department_ListView node. It defines the List View that is used for Department objects using the properties to the right. In the MasterDetailMode property's dropdown list, select ListViewAndDetailView.

Tutorial_UIC_Lesson17_1

Run the WinForms or ASP.NET application. The Department List View will appear as follows.

WinForms Application

Tutorial_UIC_Lesson17_2

ASP.NET Application

Tutorial_UIC_Lesson17_2_Web

In the WinForms application, use the Save (btn_Save) or SaveAndClose (btn_SaveClose) buttons on the toolbar to commit changes made in the Detail View. To cancel the changes, use the Cancel (btn_Cancel) button.

Note

In the ASP.NET Application, the IModelListViewWeb.DetailRowMode option is similar to MasterDetailMode, but it allows you to show a Detail View in a List View's Detail Row.

You can see the changes made in this lesson in the Model Editor invoked for the Model.DesignedDiffs.xafml file located in the Main Demo | MainDemo.Module project and the Model.DesignedDiffs.xafml file located in the Main Demo | MainDemo.Module.Web project. The MainDemo application is installed in %PUBLIC%\Documents\DevExpress Demos 18.2\Components\eXpressApp Framework\MainDemo by default. The ASP.NET version is available online at http://demos.devexpress.com/XAF/MainDemo/.

 

Next Lesson: Make a List View Editable

See Also