Freigeben über

Master-detail app Using two Datagrids in Silverlight

  • Artikel

Master Detail apps are one of the popular usages of a datagrid control. The datagrid that is shipped as part of Silverlight 2.0 RTW can be used for doing this. Coming from the client world (winforms), I wanted to try out creating a master-detail app using the SilverLight 2.0 datagrid control. The database I chose is the Northwind database and the tables are Customer, and Orders.

I believe most of you know the relationship between these two tables – (A customer can have many orders). So, what I would like to show is -> (In the first datagrid, show all the customers, in the 2nd one, show the orders belonging to the selected customer);

Here is a tutorial that uses WCF web service and LINQ to SQL to get the data from the database and allows to capture the data to be displayed in the datagrid - https://silverlight.net/learn/tutorials/sqldatagrid.aspx ; In the link, the database that is connected to is Adventureworks DB, but in my sample, I connect to the NorthWindDB. To the dbml file, I added Customers and Orders tables. To the IService WCF Interface, I added these methods

[OperationContract]

List<Customer> GetCustomers();

[OperationContract]

List<Order> GetOrdersForCustomer(string customerId);

The implementation of these methods in the WCF Service class looks like

public List<Customer> GetCustomers()

{

DataClasses1DataContext db = new DataClasses1DataContext();

var matchingCustomers = from cust in db.Customers

select cust;

return matchingCustomers.ToList();

}

public List<Order> GetOrdersForCustomer(string customerId)

{

DataClasses1DataContext db = new DataClasses1DataContext();

return db.Orders.Where(o => o.CustomerID.ToString() == customerId).ToList();

}

Notice, that I have LINQ to SQL to retrieve data from database – the first one using LINQ query syntax and the other using lambda expressions.

In the client project, I populated the Master data grid in the same way as mentioned in the link – calling the events

ServiceReference1.Service1Client webService = new ServiceReference1.Service1Client();

webService.GetCustomersCompleted += new EventHandler<SilverlightApplication6.ServiceReference1.GetCustomersCompletedEventArgs>(webService_GetCustomersCompleted);

webService.GetCustomersAsync();

In the webService_GetCustomersCompleted event, the master datagrid is populated.

void webService_GetCustomersCompleted(object sender, SilverlightApplication6.ServiceReference1.GetCustomersCompletedEventArgs e)

{

theDataGrid.ItemsSource = e.Result;

}

Populating the details datagrid.

For this, I made use of datagrid’s SelectionChanged event to populate the details table

void theDataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

SilverlightApplication6.ServiceReference1.Customer customer = theDataGrid.SelectedItem as SilverlightApplication6.ServiceReference1.Customer;

if (customer != null)

{

ServiceReference1.Service1Client webService = new SilverlightApplication6.ServiceReference1.Service1Client();

webService.GetOrdersForCustomerCompleted += new EventHandler<SilverlightApplication6.ServiceReference1.GetOrdersForCustomerCompletedEventArgs>(webService_GetOrdersForCustomerCompleted);

webService.GetOrdersForCustomerAsync(customer.CustomerID);

}

}

void webService_GetOrdersForCustomerCompleted(object sender, SilverlightApplication6.ServiceReference1.GetOrdersForCustomerCompletedEventArgs e)

{

ordersDataGrid.ItemsSource = e.Result;

}

The Master – Detail datagrid is now functional. You can also select a different Item (Row) using the up-down arrows and can see the details drid change accord to the Item selected in the Master grid.

In short, the steps that we have done are

1. Select different tables that we want to show and drop them in the dbml file

2. Define the methods we want to implement in the WCF Service Interface file

3. Implement the logic for getting the required data in the database in the class that implements the WCF interface

4. Access the Webservice from the client project and populate the datagrid.

We can extend this further by showing the order_details as a master detail relation ship with Orders table. For this, you need to

1. Drop the order_details table to the dbml file

2. Define the new methods WCF Service Interface

3. Follow steps 3 and 4 above.

Comments