Skip to main content

How to: Display Master-Detail Data (XPO)

  • 4 minutes to read

This example creates a Customers-Orders data-aware web application that stores and modifies data in a database. ASPxGridView is used to display master-detail data, implemented by 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

1. Define Persistent Classes

using DevExpress.Xpo;

public class Customer : XPObject {
    public Customer(Session session) : base(session) { }
    string fCustomerName;
    public string CustomerName {
        get { return fCustomerName; }
        set { SetPropertyValue<string>("CustomerName", ref fCustomerName, value); }

    [Association("Customer-Orders", typeof(Order)), Aggregated]
    public XPCollection Orders { get { return GetCollection("Orders"); } }

public class Order : XPObject {
    public Order(Session session) : base(session) { }
    string fProductName;
    public string ProductName {
        get { return fProductName; }
        set { SetPropertyValue<string>("ProductName", ref fProductName, value); }

    DateTime fOrderDate;
    public DateTime OrderDate {
        get { return fOrderDate; }
        set { SetPropertyValue<DateTime>("OrderDate", ref fOrderDate, value); }

    public Customer Customer;


See the following topic for detailed information on how to create XPObjects: Relationships Between Objects.

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 the following topic: Connecting XPO to a Database Server (ASP.NET).

void Application_Start(object sender, EventArgs e) {
    string conn = DevExpress.Xpo.DB.AccessConnectionProvider.GetConnectionString(
    DevExpress.Xpo.Metadata.XPDictionary dict = new DevExpress.Xpo.Metadata.ReflectionDictionary();
    // Initialize the XPO dictionary.
    DevExpress.Xpo.DB.IDataStore store = DevExpress.Xpo.XpoDefault.GetConnectionProvider(conn,
    DevExpress.Xpo.XpoDefault.DataLayer = new DevExpress.Xpo.ThreadSafeDataLayer(dict, store);
    DevExpress.Xpo.XpoDefault.Session = null;


See the following topic for detailed information on how to connect to a database server: Connecting XPO to a Database Server (ASP.NET).

3. Retrieve Data From the Database

Use the XpoDataSource components to retrieve data from the database.

  • 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.

    using DevExpress.Xpo;
    Session session;
    protected void Page_Init(object sender, EventArgs e) {
        session = new Session();
        dsCustomers.Session = session;
        dsOrders.Session = session;

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.


5. Set up a Master-Detail Relationship

Click the control’s smart tag and choose the Edit Templates task to invoke the master ASPxGridView’s Template Designer. Select the DetailRow template and drag the detail grid onto it.

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

using DevExpress.Web.ASPxGridView;

protected void detailGrid_BeforePerformDataSelect(object sender, EventArgs e) {
    Session["Oid"] = (sender as ASPxGridView).GetMasterRowKeyValue();

When finished, select the End Template Editing task and set the master grid’s ASPxGridViewDetailSettings.ShowDetailRow property to true.

6. Result

The image below illustrates the result.


See Also