ASP.NET

JQuery Tooltip with Gridview for Details RSS

9 replies

Last post Dec 22, 2012 06:25 PM by md_refay

‹ Previous Thread|Next Thread ›

Reply

md_refay

Member

416 Points

JQuery Tooltip with Gridview for Details

Dec 13, 2012 08:39 AM|LINK

Hi all

i try that example on this link http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var hideDelay = 500;
            var currentID;
            var hideTimer = null;

            // One instance that's reused to show info for the current person
            var container = $('<div id="personPopupContainer">'
              + '<table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
              + '<tr>'
              + '   <td class="corner topLeft"></td>'
              + '   <td class="top"></td>'
              + '   <td class="corner topRight"></td>'
              + '</tr>'
              + '<tr>'
              + '   <td class="left">&nbsp;</td>'
              + '   <td><div id="personPopupContent"></div></td>'
              + '   <td class="right">&nbsp;</td>'
              + '</tr>'
              + '<tr>'
              + '   <td class="corner bottomLeft">&nbsp;</td>'
              + '   <td class="bottom">&nbsp;</td>'
              + '   <td class="corner bottomRight"></td>'
              + '</tr>'
              + '</table>'
              + '</div>');

            $('body').append(container);

            $('.personPopupTrigger').live('mouseover', function() {
                // format of 'rel' tag: pageid,personguid
                var settings = $(this).attr('rel');
                var currentID = settings;
                var ID = 'ID=' + currentID;
                // If no guid in url rel tag, don't popup blank
                if (currentID == '')
                    return;

                if (hideTimer)
                    clearTimeout(hideTimer);

                var pos = $(this).offset();
                var width = $(this).width();
                container.css({
                    left: (pos.left + width) + 'px',
                    top: pos.top - 5 + 'px'
                });

                $('#personPopupContent').html('&nbsp;');

                $.ajax({
                    type: 'GET',
                    url: 'personajax.aspx',
                    data: ID,
                    success: function(data) {
                        //alert(data);
                        // Verify that we're pointed to a page that returned the expected results.
                        if (data.indexOf('personPopupResult') < 0) {
                            $('#personPopupContent').html('<span >Page  did not return a valid result for person ' + currentID + '.Please have your administrator check the error log.</span>');
                        }

                        // Verify requested person is this person since we could have multiple ajax
                        // requests out if the server is taking a while.
                        if (data.indexOf(currentID) > 0) {
                            var text = $(data).find('.personPopupResult').html();
                            $('#personPopupContent').html(text);
                        }
                    }
                });

                container.css('display', 'block');
            });

            $('.personPopupTrigger').live('mouseout', function() {
                if (hideTimer)
                    clearTimeout(hideTimer);
                hideTimer = setTimeout(function() {
                    container.css('display', 'none');
                }, hideDelay);
            });

            // Allow mouse over of details without hiding details
            $('#personPopupContainer').mouseover(function() {
                if (hideTimer)
                    clearTimeout(hideTimer);
            });

            // Hide after mouseout
            $('#personPopupContainer').mouseout(function() {
                if (hideTimer)
                    clearTimeout(hideTimer);
                hideTimer = setTimeout(function() {
                    container.css('display', 'none');
                }, hideDelay);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CellPadding="4" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"
            ForeColor="#333333" GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:TemplateField HeaderText="EmployeeID" InsertVisible="False"
                    SortExpression="EmployeeID">
                    
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("EmployeeID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="LastName" SortExpression="LastName">
                    
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
                    
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="#"  class="personPopupTrigger" rel='<%#Eval("EmployeeID")%>' id='<%#Eval("EmployeeID")%>'>details</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="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName] FROM [Employees]">
        </asp:SqlDataSource>
    
    </div>
    
    
    </form>
</body>
</html>

and in personajax.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="personajax.aspx.cs" Inherits="personajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" 
            GridLines="None">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" 
                    SortExpression="LastName" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" 
                    SortExpression="TitleOfCourtesy" />
            </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="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [FirstName], [LastName], [Title], [TitleOfCourtesy] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)">
            <SelectParameters>
                <asp:QueryStringParameter Name="EmployeeID" QueryStringField="ID" 
                    Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
</body>
</html>

it didn't work with me

can anyone help me please

Thank you

- Reply
DreamBig

Participant

1339 Points

622 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 14, 2012 02:01 AM|LINK

Here's a nice Jquery tooltip in gridview which can be easily implemented, demo included - http://www.codeproject.com/Articles/238678/Using-The-JQuery-Tooltip-Plugin-in-a-GridView

Hope it helps..

Dream Big n Act Fast.........

My Blog
- Reply
md_refay

Member

416 Points

280 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 14, 2012 10:23 AM|LINK

Thank you for your replay

but i need to solve this problem
- Reply
Anil Pathak

Member

206 Points

54 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 14, 2012 03:59 PM|LINK

hello,

please use latest jquery tooltip control, it is working fine and less code effort.

thnaks.

Anil Pathak
Software Developer
LnT Infotech
- Reply
md_refay

Member

416 Points

280 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 15, 2012 04:27 PM|LINK

can you provide me example like what i want
- Reply
DreamBig

Participant

1339 Points

622 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 18, 2012 04:50 AM|LINK

in the link which i gave you, there's an example with code as well. kindly check again - http://www.codeproject.com/Articles/238678/Using-The-JQuery-Tooltip-Plugin-in-a-GridView

Dream Big n Act Fast.........

My Blog
- Edited by Song-Tian - MSFT on Dec 20, 2012 09:34 AM
- Edited by md_refay on Dec 20, 2012 09:47 PM
- Reply
md_refay

Member

416 Points

280 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 20, 2012 09:47 PM|LINK

Thank you but i need to solve my problem
- Reply
Primillo

Star

8723 Points

1677 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 21, 2012 01:50 AM|LINK

Hi

I use this one

http://ashishware.com/WebfrmTooltip.shtml

This one load data only ondemand (mouseover)

Best Regards
Primillo
http://www.facebook.com/programandopuntonet
- Reply
asteranup

All-Star

30184 Points

4906 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 21, 2012 03:47 AM|LINK

Hi,

Check this post-

http://delicious.com/anupdg/tooltips+gridview

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
- Reply
md_refay

Member

416 Points

280 Posts

Re: JQuery Tooltip with Gridview for Details

Dec 22, 2012 06:25 PM|LINK

Thank you for replay

but can you asteranup tell me why tooltip in my example didn't work ?

any sugesstion please

‹ Previous Thread|Next Thread ›