How to: Display Master-Detail Data (XPO)

• Jun 16, 2022
• 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

C#

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); }
    }

    [Association("Customer-Orders")]
    public Customer Customer;
}

VB.NET

Public Class Customer
    Inherits XPObject

    Public Sub New(ByVal session As Session)
        MyBase.New(session)
    End Sub

    Private fCustomerName As String

    Public Property CustomerName As String
        Get
            Return fCustomerName
        End Get
        Set(ByVal value As String)
            SetPropertyValue(Of String)("CustomerName", fCustomerName, value)
        End Set
    End Property

    <Association("Customer-Orders", GetType(Order)), Aggregated>
    Public ReadOnly Property Orders As XPCollection
        Get
            Return GetCollection("Orders")
        End Get
    End Property
End Class

Public Class Order
    Inherits XPObject

    Public Sub New(ByVal session As Session)
        MyBase.New(session)
    End Sub

    Private fProductName As String

    Public Property ProductName As String
        Get
            Return fProductName
        End Get
        Set(ByVal value As String)
            SetPropertyValue(Of String)("ProductName", fProductName, value)
        End Set
    End Property

    Private fOrderDate As DateTime

    Public Property OrderDate As DateTime
        Get
            Return fOrderDate
        End Get
        Set(ByVal value As DateTime)
            SetPropertyValue(Of DateTime)("OrderDate", fOrderDate, value)
        End Set
    End Property

    <Association("Customer-Orders")>
    Public Customer As Customer
End Class

Note

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

C#

void Application_Start(object sender, EventArgs e) {
    string conn = DevExpress.Xpo.DB.AccessConnectionProvider.GetConnectionString(
  Server.MapPath("~\\App_Data\\Customer.mdb"));
    DevExpress.Xpo.Metadata.XPDictionary dict = new DevExpress.Xpo.Metadata.ReflectionDictionary();
    // Initialize the XPO dictionary.
    dict.GetDataStoreSchema(typeof(Customer).Assembly);
    DevExpress.Xpo.DB.IDataStore store = DevExpress.Xpo.XpoDefault.GetConnectionProvider(conn,
                        DevExpress.Xpo.DB.AutoCreateOption.SchemaAlreadyExists);
    DevExpress.Xpo.XpoDefault.DataLayer = new DevExpress.Xpo.ThreadSafeDataLayer(dict, store);
    DevExpress.Xpo.XpoDefault.Session = null;
}

VB.NET

Private Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
    Dim conn As String = DevExpress.Xpo.DB.AccessConnectionProvider.GetConnectionString(Server.MapPath("~\App_Data\Customer.mdb"))
    Dim dict As DevExpress.Xpo.Metadata.XPDictionary = New DevExpress.Xpo.Metadata.ReflectionDictionary()
    dict.GetDataStoreSchema(GetType(Customer).Assembly)
    Dim store As DevExpress.Xpo.DB.IDataStore = DevExpress.Xpo.XpoDefault.GetConnectionProvider(conn, DevExpress.Xpo.DB.AutoCreateOption.SchemaAlreadyExists)
    DevExpress.Xpo.XpoDefault.DataLayer = New DevExpress.Xpo.ThreadSafeDataLayer(dict, store)
    DevExpress.Xpo.XpoDefault.Session = Nothing
End Sub

Note

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.

  C#

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

  VB.NET

  Class SurroundingClass
      Private session As Session
  
      Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
          session = New Session()
          dsCustomers.Session = session
          dsOrders.Session = session
      End Sub
  End Class
  

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.

C#

using DevExpress.Web.ASPxGridView;

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

C#

Protected Sub detailGrid_BeforePerformDataSelect(ByVal sender As Object, ByVal e As EventArgs)
    Session("Oid") = (TryCast(sender, ASPxGridView)).GetMasterRowKeyValue()
End Sub

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.