Continuing exploring JQuery! I decided to implement a feature to display some kind of details related to a row displayed on GridView. For example when displaying employees details on GridView some information might not fit in the GridView because it will make it huge and wide. These infomration can be diplayed as Tooltip. Or when you want to display a picture and some kind of formated text to be diplayed as tooltip when mouse hover on the image.
My sample here will show how to implement such feature using JQuery. Again, I'm using same data and designed presented in my previous posts:
- Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel.
- Building a grouping Grid with GridView and JQuery.
I'll display customer orders as tooltip. of course so much data to be diplayed as tooltip, but this is just demonstration [View Demo].
I'm not going to explore whole code, because most of it has been discussed on my previous posts. I'll focus only on the changes. Now, the sample based on nested GridViews, one master and the other one represents the details. The master data is displayed within a DIV element inside a TemplateField column of the GridView. The DIV element has a CSS class attribute with value "group":
1: <div class="group">
2: <span>
3:<%#Eval("CustomerID")%> :<%#Eval("CompanyName")%> (<%#Eval("TotalOrders")%> Orders) </span> 4: </div>
The details GridView is also wrapped with antoher DIV element. That DIV element is located just after the first DIV and has CSS class attribute value "order":
1: <div class="order">
2: <asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
3: SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
4: <SelectParameters>
5: <asp:Parameter Name="CustomerID" Type="String" DefaultValue="" />
6: </SelectParameters>
7: </asp:SqlDataSource>
8: <asp:GridView Width="450PX" AutoGenerateColumns="false" CssClass="grid" ID="gvOrders" DataSourceID="sqlDsOrders"
9: runat="server" ShowHeader="true" EnableViewState="false">
10: <RowStyle CssClass="row" />
11: <AlternatingRowStyle CssClass="altrow" />
12: <Columns>
13: <asp:TemplateField ItemStyle-CssClass="rownum">
14: <ItemTemplate>
15: <%# Container.DataItemIndex + 1 %>
16: </ItemTemplate>
17: </asp:TemplateField>
18: <asp:BoundField HeaderText="Order ID" DataField="OrderID" ItemStyle-Width="80px" />
19: <asp:BoundField HeaderText="Date Ordered" DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}" 20: ItemStyle-Width="100px" />
21: <asp:BoundField HeaderText="Date Required" DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}" 22: ItemStyle-Width="110px" />
23: <asp:BoundField HeaderText="Freight" DataField="Freight" DataFormatString="{0:c}" 24: ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" />
25: <asp:BoundField HeaderText="Date Shipped" DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}" 26: ItemStyle-Width="100px" />
27: </Columns>
28: </asp:GridView>
29: </div>
That was all about ASPX code. Moving now to JQuery and JavaScript code. JQuery has a wonderful easy syntax that let you pickup the elements you need with writing less code. For me now, I need when I hover over the row of GridView -practically the DIV element with class group-, the details GirdView -practically the DIV element with class order-should appear as tooltip. Means first I need to register onmouseover and onmouseout for the group DIV! This is very easy to be done with JQuery, Just one line of code. JQuery provide Selectors methods that enable you to get the element you want. In my case I want to get DIV elements inside the master GridView that has CSS class attribute equal to "group":
1: function pageLoad(sender, args)
2: { 3: //register events for mouseover and mouseout for group DIV.
4: $('div.group').hover(over,out); 5: }
Note: I'm using AJAX Enabled Web Site, which means ScriptManager is placed in the page. I initialized/attached my events on pageLoad method which is know to ASP.NET AJAX. I did that because my data is placed inside UpdatePanel, and I enabled Paging on GridView. So everytime an AJAX Request is made the UpdatePanel will referesh and I need to reregister the events again. Best place to do that is OnLoad client event.
The only line that is wirtten in the code above is $('div.group').hover(over,out). This $('div.group') selecteor will get all DIV elements that has css Class attribute equal to "group". the hover method is used to attached JavaScript handlers for both mouseover "over" and mouseout "out". So as you might guessed I have 2 other Client JavaScript methods called over and out.
On the over method, the tooltip shown, on the out method the tooltip disapear. And both finds the DIV element declared just after the group DIV in order to show it or hide it. I had commented the code below to explain each line:
1: function over(e)
2: { 3: //$(this): refers to the element which fire the event, in our case the DIV element you hover on.
4: //offset(): Get the current offset (left/top) of the first matched element relative to the viewport
5: var offset = $(this).offset();
6:
7: //next([expr]): returns the very next sibling for each element.
8: //this case will return DIV element that wraps the Details GridView
9: var $next = $(this).next();
10:
11: //Set position for the tooltip element using css() method and passing the properties as JSON format.
12: $next.css({left:offset.left+$(this).width(), top:offset.top}); 13:
14: //show the tooltip with fadeIn() effect
15: $next.fadeIn('normal'); 16: }
17: function out(e)
18: { 19: var $next = $(this).next();
20: $next.fadeOut('normal'); 21: }
I guess that was all for this post. You can download the solution [GridViewMasterDetailTooltipDemo.rar (62.17 kb)] and explore the code. Also you can view the demo.
