Home > ASP.Net, Javascript, Jquery > Display Tooltip for Details With Gridview using JQuery

Display Tooltip for Details With Gridview using JQuery


Hi all,

try this example to Display Tooltip for Details With Gridview using JQuery

In this example i will Use Northwind Database and i will bind Categories Table to Gridview and also will display all products which is related to each Category as Tooltip

1) Open VS2008 and create new WebSite and Add Two Web Pages Called “Default.aspx” and “ProductDetails.aspx”

2) Right click on Solution Explorer and add Web.Config file and inside it add the Connection string to Northwind Database


<connectionStrings>
 <add name="NorthwindConnectionString" connectionString="Data Source=SQL2008;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

3) Open Default.aspx Page and From Toolbox drag Gridview control which we will beind it to Categories Table using SQLDataSource


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
 DataKeyNames="CategoryID" DataSourceID="sds_Category"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
 <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
 <asp:TemplateField HeaderText="CategoryID" InsertVisible="False" SortExpression="CategoryID">
 <ItemTemplate>
 <a href="#" class='anchor1' id='<%#Eval("CategoryID")%>'>
 <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryID") %>'></asp:Label></a>
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Category" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
 </asp:SqlDataSource>

Then at the end of your Default.aspx Page we will Add HTML DIV to display Tooltip on it

<div id="disp" style="position: absolute; background-color: Gray;"></div>

4) Add this Javascript Code to display Tooltip


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('.anchor1').mouseover(function() {
 $("#disp").empty();
 $("#disp").show("slow");
 //$("#disp").css({ top: $(this).parent().find("table:first").offset().top, left: $(this).parent().find("table:first").offset().left + $(this).parent().find("table:first").width() });
 var id1 = $(this).attr("id");
 var pos = $(this).offset();
 var width = $(this).width();
 $("#disp").css({ left: (pos.left + width) + 'px', top: pos.top - 2 + 'px' });
 var ID = 'CategoryID=' + id1;
 $.ajax({
 type: "GET",
 url: "ProductDetails.aspx",
 data: ID,
 success: function(data) {
 $("#disp").html(data);
 },
 error: function(r) {
 alert(r);
 }
 });
 return false;
 });
 $('.anchor1').mouseout(function() {
 $("#disp").hide();
 });
 $('.anchor1').mousemove(function(e) {

$("#disp").css({ left: e.pageX });
 });
 });
 </script>

5) Open ProductDetails.aspx Page and from Toolbox drag Gridview Control and Bind it using SQLDataSource Control

In this page i will display all product for specific Category and i will pass the CategoryID to this Page through query string


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
 CellPadding="4" DataKeyNames="ProductID" DataSourceID="sds_Products"
 ForeColor="#333333">
 <RowStyle BackColor="#EFF3FB" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID"
 InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName"
 SortExpression="ProductName" />
 <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
 SortExpression="QuantityPerUnit" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
 SortExpression="UnitPrice" />
 <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
 SortExpression="UnitsInStock" />
 </Columns>
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <EditRowStyle BackColor="#2461BF" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Products" runat="server"
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
 <SelectParameters>
 <asp:QueryStringParameter Name="CategoryID" QueryStringField="CategoryID"
 Type="Int32" />
 </SelectParameters>
 </asp:SqlDataSource>

After that run your web site

Hope this helps

Good Luck.

 

Advertisements
Categories: ASP.Net, Javascript, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: