Skip to main content
All docs
V24.1

Display a Nested Property Editor in a Detail View

  • 2 minutes to read

This lesson explains how to make the editor of a property visible in a Detail View.

The instructions below show how to locate the Department.Office nested property and make it visible in the Employee Detail View.

Note

Before you proceed, take a moment to review the previous lesson:

Step-by-Step Instructions

  1. Open the Model.DesignedDiffs.xafml file in the Model Editor.

  2. Navigate to the Views | MySolution.Module.BusinessObjects | Employee node. Expand the Employee_DetailView child node and click the Layout node.

  3. The Model Editor displays a design surface that imitates the Employee Detail View. Right-click the View’s empty space and choose Customize Layout from the context menu:

    Start layout customization

  4. In the invoked Customization window, click the Add button:

    Customization Window

  5. In the Object Model dialog, expand the Department node, check the Office checkbox, and click OK.

    Object Model Window

  6. The Office: item appears on the Hidden Items tab of the Customization window:

    A new field is added to the Object Model Window

  7. Drag the Office: item to the required position of the Employee Detail View.

    Add Layout Item Department.Office

  8. Run the application, open the Employee Detail View, and find the Office editor:

    ASP.NET Core Blazor
    ASP.NET Core Blazor: the new editor in the Detail View
    Windows Forms:
    Windows Forms: the new editor in the Detail View

Runtime Customization in ASP.NET Core Blazor

In an XAF ASP.NET Core Blazor application, you can also customize the Detail View layout at runtime. For more information, refer to the following topic: Runtime Layout Customization in ASP.NET Core Blazor Applications.

  1. Navigate to the Employee Detail View. Right-click the layout and select the Customize Layout option in the context menu.
  2. In the invoked Customization form, click the Customize button under the Hidden Items list.

    ASP.NET Core Blazor: Hidden Items list in the Customization form, DevExpress

  3. In the invoked Object Model dialog window, expand the Department node, check the Office checkbox, and click OK.

    ASP.NET Core Blazor: Object Model dialog window, DevExpress

    Note

    If you have an extensive and complicated data model, the structure in the Object Model dialog window may be confusing. To see the path to a reference property, hover your mouse over the property in the Object Model dialog window. This may help you distinguish between similar properties.

  4. The Office item now appears in the Hidden Items list of the Customization window.

    ASP.NET Core Blazor: The Office item in the Hidden Items list, DevExpress

  5. Drag the Office item to the required position in the Employee Detail View.

Note

To remove unnecessary hidden items, uncheck them in the Object Model dialog window.

Next Lesson

Change List View Filters