Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Basics
|
ASP.NET 2.0 Basics If you are new to ASP or ASP.NET programming with version 2.0, this is the forum to begin asking questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 20th, 2008, 06:24 PM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default [Closed] GridView and ToolTip

I am trying to get my tool tip to work. When I hove over the gridview column nothing happens. Can anyone see where I messed up (1st time I'm trying to use JScript)

Markup:

Code:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
    CodeFile="DiaryInquiry.aspx.vb" Inherits="_Default" Title="Vecellio Group Inc - AppNet - Job Reporting - Diary Inquiry" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script type="text/javascript" language="javascript">
        function showToolTip(ctrSource,text) 
        { 
            alert('Event got fired');
               var toolTip = document.getElementById("spnTip"); 
            toolTip.style.top = window.event.clientY + 20; 
            toolTip.style.left = window.event.clientX; 
            toolTip.innerText = text; 
            toolTip.style.visibility = "visible"; 
        } 
        function hideToolTip() 
        { 
            document.getElementById("spnTip").style.visibility = "hidden"; 
        }
    </script>

    <span id="spnTip" style="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px solid;
        padding-left: 2px; font-size: 8pt; z-index: 106; background: lightyellow; visibility: hidden;
        padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid;
        font-family: Verdana; position: absolute" onmouseout="hideToolTip()">
    </span>

<asp:GridView ID="GridView1" runat="server" Style="z-index: 10px; position: relative;
                        top: 21px; border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid;
                        border-bottom: gray thin solid; font-size: 12px; left: 1px;" Width="951px" AllowPaging="True"
                        AllowSorting="True" Font-Size="Small" AutoGenerateColumns="False" CellSpacing="2"
                        HorizontalAlign="Left" BorderColor="LightGray" BorderStyle="None" OnSorting="GridView1_Sorting"
                        EmptyDataText="N/A" Height="20px" PageSize="14">
                        <Columns>
                            <asp:BoundField DataField="date" DataFormatString="{0:d}" HeaderText="Date" SortExpression="date"
                                HtmlEncode="False" ReadOnly="True">
                                <ItemStyle HorizontalAlign="Left" Width="60px" Wrap="False" />
                            </asp:BoundField>
                            <asp:BoundField DataField="name" HeaderText="Batch Name">
                                <ItemStyle HorizontalAlign="Left" Width="200px" />
                            </asp:BoundField>
                            <asp:BoundField DataField="emp_name" HeaderText="Foreman">
                                <ItemStyle Width="160px" />
                            </asp:BoundField>
                            <asp:TemplateField HeaderText="Diary Text">
                                <EditItemTemplate>
                                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("diary") %>'></asp:TextBox>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("diary") %>'></asp:Label>

                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" Width="600px" />
                            </asp:TemplateField>
                            <asp:TemplateField Visible="False">
                                <EditItemTemplate>
                                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("diary1") %>'></asp:TextBox>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("diary1") %>'></asp:Label>
                                </ItemTemplate>
                                <ItemStyle Width="4000px" />
                            </asp:TemplateField>
                        </Columns>
                        <HeaderStyle BackColor="#FFC080" Height="35px" />
                        <AlternatingRowStyle BackColor="#FFFFC0" />
                        <RowStyle Height="20px" Wrap="False" />
                        <SelectedRowStyle BackColor="#FF8080" Wrap="False" />
                        <EmptyDataRowStyle BorderStyle="Solid" />
                    </asp:GridView>


Code behind:

Code:
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

        Try

            If e.Row.RowType = DataControlRowType.DataRow Then
                Dim myControl1 As Label = e.Row.FindControl("Label2")
                If (Not myControl1 Is Nothing) Then
                    e.Row.Cells(3).Attributes.Add("onmouseover", "showToolTip(this)" & myControl1.Text)
                    e.Row.Cells(3).Attributes.Add("onmouseout", "hideToolTip(this)")
                End If
            End If
        Catch ex As Exception
            ErrorString = ex.ToString
            ASPNET_MsgBox("An error has occurred showing the data: " + vbCrLf + ErrorString)
        End Try


    End Sub
 
Old August 21st, 2008, 12:35 AM
Authorized User
 
Join Date: Apr 2008
Posts: 54
Thanks: 0
Thanked 4 Times in 4 Posts
Default

<asp:Label ID="Label1" runat="server" Text='<%# Bind("diary") %>'></asp:Label>



when you put tooltip to a label it will display a tool tip to the label not to the entire column.
again it is in itemTemplate so when the gridview in edit mode the label will not be rendered so you will not be having any tooltip.
to have tooltip in editmode you have to give the tool tip to respective textbox.


Hope i understood you clearly. If not please explain where i have misunderstood. thanks


Pon Saravanan
http://www.vbknowledgebase.com
 
Old August 21st, 2008, 06:30 AM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Hi Pons, I think a get the idea but still confused. ABout the edit mode, I'm just displaying information without any possible update to the grid.

The below code is the "old" code. It worked fine except for that there is not enough room to display the full text. In my grid view column I am showing a short text and "on hover" displaying the full text.

Code:
<asp:Label ID="Label3" runat="server" Text='<%# Bind("diary") %>' ToolTip='<%# Bind("diary1") %>'></asp:Label
Since there is a limitation with above tool tip as to size of content I'm trying to use JScript to solve the issue. This is where I get confused and need some help putting my code together and learn from that. So my question is, given what I have posted will you be able to "spell" out what my code should look like? At this point the Java funtion is not even getting executed. Thank you very much.
 
Old August 21st, 2008, 08:57 AM
Authorized User
 
Join Date: Apr 2008
Posts: 54
Thanks: 0
Thanked 4 Times in 4 Posts
Default

hi snufse
ok then ignore edit mode problem.

Regarding is your showToolTip function accepts two arguments first one is the self reference and the second one is the text here you need to refine your javascript code:

function showToolTip(ctrSource,text)
{
    ctrSource.style.top = window.event.clientY + 20;
    ctrSource.style.left = window.event.clientX;
    ctrSource.innerText = text;
    ctrSource.style.visibility = "visible";
}


Server side change In RowDataBound Event
change like this
e.Row.Cells(3).Attributes.Add("onmouseover", "showToolTip(this,'" & myControl1.Text + "')")

the codes here i have given are not tested for information purpose only. Do the changes what ever necesary.

Hope it will work. if not please let me know

Pon Saravanan
http://www.vbknowledgebase.com
 
Old August 21st, 2008, 10:14 AM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Hi Pons,
I did the changes you recommended. When I do the "mouse over" on the column in the grid view nothing happens. I do not think the JScript function even get fired. I have bedugged the variable "mcontrol1" and it has the correct value (ie the extended text). Question: I cannot see where we have mapped the tool tip or the function to any gridview columns, am I correct? Looking at the markup code, this is where I need to hover and show the tool tip

Code:
<asp:TemplateField HeaderText="Diary Text">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("diary") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" Width="600px" />
</asp:TemplateField>
This is where the extended text is held:


Code:
<asp:TemplateField Visible="False">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("diary1") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="4000px" />
</asp:TemplateField>
Any other good suggestions?

 
Old August 21st, 2008, 11:58 AM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Just for fun I did the following test:

Code:
If e.Row.RowType = DataControlRowType.DataRow Then
 Dim onmouseoverStyle As String = "this.style.backgroundColor='blue'"
 Dim onmouseoutStyle As String = "this.style.backgroundColor='white'"
 e.Row.Cells(2).Attributes.Add("onmouseover", onmouseoverStyle)
 e.Row.Cells(2).Attributes.Add("onmouseout", onmouseoutStyle)
End If
This worked fine for cells 0, 1 and 2. But does not work for cell 3.

At least we know the "onmou****xx" is working. Why it does not for cell 3 I have no clue except for that cell 2 is a BoundField and cell 3 is a TemplateField. If I try to call the JScript function using cell 2, it does not work.
 
Old August 21st, 2008, 02:53 PM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

I will close this case as I made some headway. Will open the remaining issues under new post.






Similar Threads
Thread Thread Starter Forum Replies Last Post
How to create a tooltip Neha XSLT 2 July 14th, 2008 06:21 AM
How to add usercontrol in tooltip KamalRaturi ASP.NET 2.0 Professional 0 October 25th, 2007 09:07 AM
tooltip interval??? nerssi HTML Code Clinic 5 August 4th, 2006 12:05 AM
tooltip Lucian Ion Javascript How-To 1 August 1st, 2005 10:52 AM
Tooltip in datagrid lily611 General .NET 11 September 23rd, 2004 04:44 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.