How to: Display Master-Detail Data (XPO)

  • 4 min to read

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

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

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

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

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


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

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

3. Retrieve Data From the Database

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

  • Master: Customers

    MasterDetailXPO_Customers

    Set its TypeName property to Customer.

  • Detail: Orders

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

    MasterDetailXPO_OrdersParams

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

MasterDetailXPO_CustEditing

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.


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 enable the master grid's ASPxGridViewDetailSettings.ShowDetailRow option.

6. Result

The image below illustrates the result.

MasterDetailXPO_Result

See Also