Master-Detail GridViews using AJAX.

Recently, I had the need to have a GridView on the top half of a page, and GridView of related records on the bottom half of the page. This is the typical Master-Detail relationship. When the user clicks on a LinkButton on the Master GridView I want the Detail GridView to update. The trick is, I want this to happen without a postback. AJAX to the rescue.

I have attached an event handler for the RowCommand event of the Master GridView. In here I look for the CommandName that I specified in the TemplateField that has a ButtonLink in it. This allows me to handle the ButtonLink clicks in one place and quite simply.

Well, there are a few tricks I had to learn to get everything to work with AJAX. Here is what I did.

1. Add the ScriptManager control to the ASP.NET page.
2. Add the UpdatePanel control to the page.
3. Set the UpdateMode to Conditional
4. Move the Detail GridView into the UpdatePanel
5. Added an event handler for RowCreated event on the Detail GridView.
6. In the RowCreated event handler I used e.Row.FindControl() to find my ButtonLink on the row.
7. Once I had the ButtonLink, I registered it using the ScriptManager1.RegisterAsyncPostBackControl(myLink) method to register my ButtonLink.

My failed attempts included trying to register the Master GridView using the ScriptManager1.RegisterAsyncPostBackControl(MyMasterGridView), and at first appeared to work. Then I noticed strange behavior. My column headers would not sort anymore, and another column that had a checkbox in it was firing it changed event for every row. I would love to know why registering the GridView did not work. I suspect it may have something to do with the callback based sorting the GridView can do out of the box.