[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Collapse]Grid View
   [Expand]Product Information
    Getting Started
    Grid Designer
   [Expand]Visual Elements
     How to: Add an Unbound Column to Supply Additional Data
     How to: Add and Initialize a New Row
     How to: Add Custom Filter Values to the Filter Dropdown
     How to: Bind the ASPxGridView to Data Created at Runtime (DataTable)
     How to: Bind to an ArrayList
     How to: Change the Style Settings of Individual Data Cells
     How to: Create an ASPxGridView at Runtime
     How to: Create and Customize a Group Summary
     How to: Create Custom Command Buttons
     How to: Create Edit Form Template at Runtime
     How to: Create Total Summaries
     How to: Delete Selected Rows
     How to: Display a Context Menu For Column Headers
     How to: Display Images within Preview Rows
     How to: Display Master-Detail Data (XPO)
     How to: Display Real-Time Data
     How to: Dynamically Change Images Displayed Within Data Cells
     How to: Dynamically Display the Focused Row's Values Outside the ASPxGridView
     How to: Export ASPxGridView Data as a PDF
     How to: Filter Data by Multiple Columns
     How to: Filter Records
     How to: Generate Persistent Objects for Existing Data Tables
     How to: Hide Expand Buttons for Master Rows That Have Empty Details
     How to: Implement Custom Grouping
     How to: Implement Custom Sorting
     How to: Implement Data Editing When a Grid is Bound to a Table Created At Runtime
     How to: Implement Master-Detail at Runtime (XPO)
     How to: Obtain Server Data From the Client
     How to: Present Data in Cards
     How to: Provide Custom Display Text for Data Cells
     How to: Render a Different Content From Default Exporting
     How to: Save and Restore the ASPxGridView's Layout
     How to: Save Changes and Switch to Browse Mode by Clicking ENTER
     How to: Select Rows That Contain the Specified Value
     How to: Show Detail Information in a Separate ASPxGridView
     How to: Sort Groups by Summary Values
     How to: Switch ASPxGridView to an Edit Mode by Double-Clicking a Row
     How to: Use a Hyperlink Whose Argument Depends on Several Cell Values in the ASPxGridView
     How to: Validate Data On the Client
   [Expand]Member Tables
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Display Master-Detail Data (XPO)

In this example, you'll learn how to create a Customers-Orders data-aware web application that stores and modifies data in a database. ASPxGridView is used to display master-detail data, implemented via eXpress Persistent Objects for .NET.


  1. Define Persistent Classes
  2. Connect to a Database Server
  3. Retrieve Data From the Database
  4. Create Master and Detail ASPxGridViews
  5. Set up a Master-Detail Relationship
  6. Result

Expanded 1. Define Persistent Classes


For detailed information on creating XPObjects, see Tutorial 1 - Your First Data-Aware Application with XPO and Tutorial 2 - Relations (One to Many).

Expanded 2. Connect to a Database Server

To connect XPO to a database server, create an IDataLayer object. The code that creates the data layer must be placed inside the Application_Start event handler in the Global.asax module of your Web Site. For more information, see Connecting XPO to a Database Server (ASP.NET).


For detailed information, see Tutorial 5 - An ASP .NET Application for Data Editing.

Expanded 3. Retrieve Data From the Database

To retrieve data from the database, use the XpoDataSource components.

  • Master: Customers

    Set its TypeName property to Customer.

  • Detail: Orders

    Set its TypeName to Order.

    Use the Criteria property to specify the filter condition. Set this property to '[Customer.Oid] = ?'.

    Invoke the Parameter Collection Editor, and add a criteria parameter. This parameter gets its value at runtime from the "Oid" Session field.

  • Handle the page's Init event to bind XpoDataSource components to a database.

Expanded 4. Create Master and Detail ASPxGridViews

Create two ASPxGridView controls. Bind the first grid (master) to the dsCustomers. Bind the second grid (detail) to the dsOrders. Enable editing and deleting in both grids.

Expanded 5. Set up a Master-Detail Relationship

Invoke the master ASPxGridView's Template Designer by clicking the Edit Templates task. Select the DetailRow template. Drag the detail grid onto the Detail Row template.

Handle the detail grid's ASPxGridBase.BeforePerformDataSelect event to specify session values.

When finished, select the End Template Editing task and enable the master grid's ASPxGridViewDetailSettings.ShowDetailRow option.

Expanded 6. Result

The image below illustrates the result.

Expanded See Also

Is this topic helpful?​​​​​​​