Introduction:
Last month Matt Berseth posted very good post about how to build Master-Detail with the GridView, DetailsView and ModalPopup Controls. Today I'm going to clone his post and build the same feature using jQuery with jQuery Plugins; one for popup windows jqModal& and the other is for Color Animation. You can view a demo of this sample here [View Demo].
Prerequisites:
Because I'm using some design tips and styles posted in Matt's posts, I recommend to return to his original posts regarding styling and UI enhancement. I used the styles and design shown on his post Building a VS2008 Styled Grid with the GridView Control.
In my sample I'm using UpdatePanel, and used a client side technique to update the UpdatePanel. To read and review more about this technique please read Dave's post Easily refresh an UpdatePanel, using JavaScript.
It is important also to review documentation of jqModalas I'm not going to explain its APIs.
Implementation:
To make a long story short, I just modified Matt's sample and replaced ModalPopup control of AJAX Control Toolkit with jqModal. Also Matt used to indicate the updated row by setting a style sheet class to the updated row for certain period of time then remove it to make it look as before. I did the same, but I used some kind of animation provided by Color Animationplugin for jQuery.
The GridView which displays Products List is placed inside an UpdatePanel. Each record will display edit button. When the edit button is clicked it will set a hidden field with ProductID then invoke client script to update another UpdatePanel that contains DetailsView control that will be used to display Product Detail for update. It is important to note that the button doesn't cause a PostBack, instead it calls __doPostBack JavaScript method with UpdatePanel as a parameter to force Async Request to be initiated. The Server will process the request and the DetailsView will bind Product Details. When the Async Request Ends, jqModal will be invoked to show a modal popup that carries the DetailsView Control to show editable Product Detail.
On the popup window, user will be able to edit the data then save or close to discard changes. If Save is Clicked, recored will be saved in the database and modal window will disappear, then the GridView will display a color fading indicator on the updated row.