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.
- Add the ScriptManager control to the ASP.NET page.
- Add the UpdatePanel control to the page.
- Set the UpdateMode to Conditional
- Move the Detail GridView into the UpdatePanel
- Added an event handler for RowCreated event on the Detail GridView.
- In the RowCreated event handler I used e.Row.FindControl() to find my ButtonLink on the row.
- 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.