Skip to main content
.NET Standard 2.0+

Display a Detail View with a List View

  • 2 minutes to read

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.


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.


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

WinForms Application


ASP.NET Web Forms Application


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.


In the ASP.NET Web Forms 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 22.1\Components\XAF\MainDemo by default. The ASP.NET Web Forms version is available online at


Next Lesson: Make a List View Editable

See Also