|
Subject:
|
[Closed] GridView and ToolTip
|
|
Posted By:
|
snufse
|
Post Date:
|
8/20/2008 6:24:41 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:
<%@ 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>
<!-- <asp:Label ID="Label3" runat="server" Text='<%# Bind("diary") %>' ToolTip='<%# Bind("diary1") %>'></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:
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
|
|
Reply By:
|
pons_saravanan
|
Reply Date:
|
8/21/2008 12:35:25 AM
|
<asp:Label ID="Label1" runat="server" Text='<%# Bind("diary") %>'></asp:Label>
<!-- <asp:Label ID="Label3" runat="server" Text='<%# Bind("diary") %>' ToolTip='<%# Bind("diary1") %>'></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
|
|
Reply By:
|
snufse
|
Reply Date:
|
8/21/2008 6:30:46 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.
<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.
|
|
Reply By:
|
pons_saravanan
|
Reply Date:
|
8/21/2008 8:57:52 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
|
|
Reply By:
|
snufse
|
Reply Date:
|
8/21/2008 10:14:36 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
<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:
<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?
|
|
Reply By:
|
snufse
|
Reply Date:
|
8/21/2008 11:58:23 AM
|
Just for fun I did the following test:
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.
|
|
Reply By:
|
snufse
|
Reply Date:
|
8/21/2008 2:53:49 PM
|
I will close this case as I made some headway. Will open the remaining issues under new post.
|
