Master detail with WebDataGrid – Infragistics

I’ve made one possible implementation of “Master Detail” with two grids in response of a customer in our forums : http://community.infragistics.com/forums/t/46501.aspx .  I decided to share it here in more details.
In order to run the sample you need to have Infragistics ASP.NET toolset 9.1 or newer version installed . You must have Northwind database as well. Just setup the connection string and run the sample.

The basic idea of the sample is:  A user has two grids, first grid – “Master” shows “Customer” related information from Northwind database, second grid – “Details” shows “Order” related information .  When a user selects a row from “Master” grid,  “Detail” grid is filtered and all “Orders” that belong to the selected user are returned.

This scenario is implemented as built- in AJAX functionality of WebDataGrid is  used   in combination with UpdatePanel as result is achieved a smooth user experience and no full postback is made while “Detail” grid is filtered.

Lets get started:

In the sample application Ling to SQL – ORM is used therefore the Model looks like this:

The tricky part comes here. When a user selects a row from the “Master” grid AJAX pastback is issued by the grid. As  can be seen  here is used built – in  AJAX mechanism of the grid. Inside Behaviors tag are the  needed settings to make the grid behaves in this way. So, when a row is selected  MasterGrid_RowSelecttionChanged event is raised on the server. All that is done in this event is to get  the customer id from the selected row and put it into the Session object, then to the client is  transferred  flag based on which we decide whether to filter the “Detail”- grid.

The code – behind of the application looks like this:

The “Detail”  grid is the one that shows all Orders that belong to a particular customer. AJAXResponseHandler is used to get the transferred flag(property).

In the code below you can see that the grid is placed inside UpdatePanel.  Inside the panel  there is also a button with visibility hidden.

What happens ?  When the response complete from the “Master” – grid AJAXResponseHandler is run if filtering is allowed the button inside of the panel is found by this code document.getElementById(‘<%= Button1.ClinetID%>’); and clicked. Since the button is inside of UpdatePanle it triggers an AJAX postabck to the server. Button1_Click event handler is raised and filtering is done over the Orders collection based on CustomerID. The result is bind to “Detail”- gird

Finally we got this result. As you can see the “Master” –  grid shows Customer Blauer See is selected and  “Detail” – grid shows all orders that belong to this customer

The sample can be downloaded from here http://cid-d385c163e2422923.office.live.com/self.aspx/.Public/samples/ASP.NET/MasterDetail.zip