Nothing really new on this post, just another way to implement mater/detail representation with nested GridViews with assistance of JQuery. Previously I posted about building same feature using ASP.NET AJAX CollapsiblePanel Extender. that was another example of what Matt Berseth presented in his post about building a grouping grid using ASP.NET 3.5 ListView and Linq.
In this post I'll show how same feature can be implemented using JQuery. Very simple and straight forward.
Requirements:
It is required to download latest version of JQueryin order to be able to use this sample [View Demo].
Implementation:
I've created a new ASP.NET AJAX enabled web site using Visual Studio. And I added a script reference to my script manager:
1: <asp:ScriptManager ID="ScriptManager1" runat="server" >
2: <Scripts>
3: <asp:ScriptReference Path="~/scripts/jquery-1.2.3.min.js" ScriptMode="Release" />
4: </Scripts>
5: </asp:ScriptManager>
Using same design I made on my previous post, I started to implement the usage of JQuery. I used JQuery to replace the functioanlity provided by CollapsiblePanelExtender.
JQuery has a method called slideToggle, I used this method to expand and collapse the details grid. Below is the JavaScript method used to handle expand and collapse:
1: <script type="text/javascript">
2: //master: id of div element that contains the information about master data
3: //details: id of div element wrapping the details grid
4: function showhide(master,detail)
5: { 6: //First child of master div is the image
7: var src = $(master).children()[0].src;
8: //Switch image from (+) to (-) or vice versa.
9: if(src.endsWith("plus.png")) 10: src = src.replace('plus.png','minus.png'); 11: else
12: src = src.replace('minus.png','plus.png'); 13:
14: //Set new image
15: $(master).children()[0].src = src;
16:
17: //Toggle expand/collapse
18: $(detail).slideToggle("normal"); 19: }
20: </script>
Both master and details parameters mentioned in the code above, is ID of a DIV element with leading '#' -related to JQuery Syntax-. Those DIV elements are used to wrap both master data and details data:
1: <div class="group" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>' onclick='showhide(<%#String.Format("\"#customer{0}\"",Container.DataItemIndex) %>,<%#String.Format("\"#order{0}\"",Container.DataItemIndex) %>)'> 2: ......<!--Master Data-->
3: </div>
1: <div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order"> 2: ....<!--Details Data-->
3: </div>
When you click on first DIV, collapse/expand image will switch, and the second DIV wil toggel its state (collapse/expand). Same thing can be applied to Matt's sample using JQuery.
Download the attached sample to review the code.
GridViewJQueryDemo.rar (47.76)
