Relational Data (Part 2 of 6)

This part of the tutorial will show you how to visualize relational data.

Add a second Module

We are going to add a second module to our application which will show all orders with their corresponding details.

1. Right-click the AdventureWorksDemo.Module project in your solution and choose Add -> Vidyano Module.
2. Set the name to OrderManagement.mod. Select the AdventureWorksDataContext and click Finish.

Add a new page to the Order Management module

Open the module by double-clicking OrderManagement.mod in the AdventureWorksDemo.Module project.

1. On the left side of the Module Designer, click Pages, and click the + button. The Add New Page wizard will be launched.
2. Enter OrderOverview as the name for our new page and click Next.
3. Select a 2-part layout template for this page.


Figure 15 : Two Part Layout Template

4. Click Finish.

Binding the relational data

In the AdventureWorks 2008 Light database, there is a one-to-many relation between the SalesOrderHeader entity and the SalesOrderDetail entity. We are going to show this on our new page.

1. On the Page designer for the OrderView page, click button “1” to start the part generator for part 1.
2. Select the ListView (Grid) control type.
3. Select SalesOrderHeader entity and the Module.Context.SalesOrderHeaders binding.
4. Add some properties from the list on the left, make sure Customer is also added. Click Next.


Figure 16 : Binding SalesOrderHeader

5. The reason we added the Customer property in the previous dialog is to show that you can also select properties which return an entity. Vidyano will detect this and in the next dialog prompt for the property that needs to be shown for that particular entity. Select LastName and click Finish.


Figure 17 : Selecting the member of entity property

Now that we have selected the master entity, we need to bind the details.

1. On the OrderManagement designer, click button “2” to start the part wizard.
2. Select the ListView (Grid) control type.
3. Select SalesOrderDetail entity set for the binding to come from the SelectedItem.SalesOrderDetails property on PART_1.


Figure 18 : Binding SalesOrderDetail

4. Select some properties, including Product and click Next.
5. Select the Name member of the Product entity and click Next.


Figure 19 : The OrderOverview page designer with bindings set

Launching the application

1. Run the application by pressing CTRL+F5 or the Play button on the toolbar.
2. In the application, click on the OrderManagement module.


Figure 20 : Relational Data in action