[Closed] GridView and ToolTip

snufse · August 20th, 2008, 06:24 PM

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

pons_saravanan · August 21st, 2008, 12:35 AM

<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

snufse · August 21st, 2008, 06:30 AM

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.

pons_saravanan · August 21st, 2008, 08:57 AM

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

snufse · August 21st, 2008, 10:14 AM

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?

snufse · August 21st, 2008, 11:58 AM

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.

snufse · August 21st, 2008, 02:53 PM

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