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.

Define Persistent Classes
Connect to a Database Server
Retrieve Data From the Database
Create Master and Detail ASPxGridViews
Set up a Master-Detail Relationship
Result

csharp

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

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#
VB.NET

csharp

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

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
Detail : Orders
Handle the page’s Init event to bind XpoDataSource components to a database.

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.

csharp

using DevExpress.Web.ASPxGridView;

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

csharp

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.