I created a tooltip to display some information in a rad Grid. It appears very fine but when I added a hyper link column in the grid, tooltip disappears as soon as I mouse over the hyperlink in the grid.
Please see attached snapshot for issue details.
I have tooltip defined as follows
I tried to change the HideEvent to manual close, but there were two issues with that. One is that close button appears in the mid of the tooltip top and also it overlays a portion of the grid. Secondly, the hyperlink in the grid also tries to display tooltip and hence, close the current tooltip. But really, Manual close is not my option.
Is there a way that I can still use Hyperlink column in the grid and keep the tooltip opened? Almost all columns in the grid have tooltips and all tooltips shows grid in them. But some has hyperlink and other dont. Whereever I have hyperlink, the tooltip closes as soon as cursor moves over the hyperlink.
Any way to avoid that?
Thanks,
Sameers
Please see attached snapshot for issue details.
I have tooltip defined as follows
<
telerik:RadToolTipManager
ID
=
"radToolTipManager"
runat
=
"server"
Position
=
"BottomRight"
Animation
=
"None"
AutoTooltipify
=
"true"
AutoCloseDelay
=
"0"
ShowDelay
=
"100"
HideEvent
=
"LeaveTargetAndToolTip"
Width
=
"100"
Height
=
"50"
OffsetX
=
"10"
OffsetY
=
"10"
>
</
telerik:RadToolTipManager
>
I tried to change the HideEvent to manual close, but there were two issues with that. One is that close button appears in the mid of the tooltip top and also it overlays a portion of the grid. Secondly, the hyperlink in the grid also tries to display tooltip and hence, close the current tooltip. But really, Manual close is not my option.
Is there a way that I can still use Hyperlink column in the grid and keep the tooltip opened? Almost all columns in the grid have tooltips and all tooltips shows grid in them. But some has hyperlink and other dont. Whereever I have hyperlink, the tooltip closes as soon as cursor moves over the hyperlink.
Any way to avoid that?
Thanks,
Sameers
5 Answers, 1 is accepted
0
Hi Sameers,
I am not sure what your scenario is, but I cannot find a reason for this behavior on a simple HyperLink column. Actually, what I see in the screenshot does not look like HyperlinkColumn, yet CSS can achieve it. You can find my test page attached and a video with the behavior on my end here: http://screencast.com/t/FBGsXQVLtK9q.
What I suspect is that you have added a RadToolTipManager to this column and when it tries to show itself on hover of the column it hides the previous tooltip. This is by design, as in any system a second tooltip hides the first one and therefore the RadToolTip has the same behavior - you cannot have two RadToolTips opened at the same time.
If you wish to have tooltips on this column I advise that you examine the following help article:http://www.telerik.com/help/aspnet-ajax/grid-appearance-tooltips-for-grid-items.html.
Best wishes,
Marin
the Telerik team
I am not sure what your scenario is, but I cannot find a reason for this behavior on a simple HyperLink column. Actually, what I see in the screenshot does not look like HyperlinkColumn, yet CSS can achieve it. You can find my test page attached and a video with the behavior on my end here: http://screencast.com/t/FBGsXQVLtK9q.
What I suspect is that you have added a RadToolTipManager to this column and when it tries to show itself on hover of the column it hides the previous tooltip. This is by design, as in any system a second tooltip hides the first one and therefore the RadToolTip has the same behavior - you cannot have two RadToolTips opened at the same time.
If you wish to have tooltips on this column I advise that you examine the following help article:http://www.telerik.com/help/aspnet-ajax/grid-appearance-tooltips-for-grid-items.html.
Best wishes,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Sameers
Top achievements
Rank 1
answered on 27 Sep 2011, 08:04 AM
Thank you for your reply.
I see the video you attached. It seems everything is ok with that. But the tooltip items I am creating is totally from the code, at runtime (and NOT as user control). Here is the code to generate a tooltip.
See that how I created the grid at runtime and bound that with the datatable. Finally, here is how it is added to the tooltip.
I do see that when I mouse over the first hyper link column, there is a new tooltip which is for sure causing current tooltip to be disappeared. I think I need a way to NOT Allow tooltip on the hyperlink column. But i couldn;t find a property of Hyperlink column which may be used to control tooltip appearance.
Is there any way to disable tooltip for hyperlink column?
thanks again
Sameers
I see the video you attached. It seems everything is ok with that. But the tooltip items I am creating is totally from the code, at runtime (and NOT as user control). Here is the code to generate a tooltip.
Private
Function
GetOnOrderQty(
ByVal
ProductID
As
String
)
As
Control
Dim
strQ
As
String
=
"SQL to Select Data From Database"
Dim
dt
As
DataTable = DataHelper.ExecuteQuery(strQ)
Dim
tbl
As
New
Table
tbl.Rows.Add(
New
TableRow)
tbl.Rows(0).Cells.Add(
New
TableCell())
tbl.Rows(0).Cells(0).Text =
"<a target='_blank' href='/Inventory/InventoryArrival.aspx?ProductID="
& ProductID &
"'>View Inventory Arrival</a>"
tbl.Rows.Add(
New
TableRow)
tbl.Rows(1).Cells.Add(
New
TableCell())
tbl.Rows(1).Cells(0).Controls.Add(PrepareGridForOnOrder(dt))
Return
tbl
End
Function
Private
Function
PrepareGridForOnOrder(
ByVal
dt
As
DataTable)
As
Telerik.Web.UI.RadGrid
dt.Columns.Add(
"POViewURL"
)
For
Each
row
As
DataRow
In
dt.Rows
row(
"POViewURL"
) =
"/Purchasing/PurchaseOrder.aspx?merchantid="
& row(
"CompanyID"
) &
"&orderid="
& row(
"ID"
)
Next
Dim
grd
As
New
Telerik.Web.UI.RadGrid
grd.MasterTableView.AutoGenerateColumns =
False
'
Dim
idColumn
As
New
Telerik.Web.UI.GridHyperLinkColumn
With
idColumn
.DataNavigateUrlFields =
New
String
() {
"POViewURL"
}
.DataTextField =
"ID"
.Target =
"_blank"
.HeaderText =
"PO#"
.HeaderTooltip =
""
End
With
grd.MasterTableView.Columns.Add(idColumn)
Dim
dateOrdered
As
New
Telerik.Web.UI.GridDateTimeColumn
With
dateOrdered
.DataField =
"DateOrdered"
.HeaderText =
"Date Ordered"
.DataFormatString =
"{0:MM/dd/yyyy}"
End
With
grd.MasterTableView.Columns.Add(dateOrdered)
Dim
vendorCol
As
New
Telerik.Web.UI.GridBoundColumn
With
vendorCol
.DataField =
"VendorName"
.HeaderText =
"Vendor Name"
End
With
grd.MasterTableView.Columns.Add(vendorCol)
Dim
QtyOrderedCol
As
New
Telerik.Web.UI.GridBoundColumn
With
QtyOrderedCol
.DataField =
"QtyOrdered"
.HeaderText =
"Ordered"
End
With
grd.MasterTableView.Columns.Add(QtyOrderedCol)
Dim
QtyReceivedCol
As
New
Telerik.Web.UI.GridBoundColumn
With
QtyReceivedCol
.DataField =
"QtyReceived"
.HeaderText =
"Received"
End
With
grd.MasterTableView.Columns.Add(QtyReceivedCol)
grd.DataSource = dt
grd.DataBind()
Return
grd
End
Function
See that how I created the grid at runtime and bound that with the datatable. Finally, here is how it is added to the tooltip.
Private
Sub
radToolTipManager_AjaxUpdate(
ByVal
sender
As
Object
,
ByVal
e
As
Telerik.Web.UI.ToolTipUpdateEventArgs)
Handles
radToolTipManager.AjaxUpdate
Dim
ProductID
As
String
= e.Value
If
ProductID
Is
Nothing
OrElse
ProductID.Trim =
""
Then
Return
Dim
ctrl
As
Control =
Nothing
If
e.TargetControlID.EndsWith(
"lblOnOrder"
)
Then
ctrl = GetOnOrderQty(ProductID)
End
If
If
ctrl IsNot
Nothing
Then
e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl)
End
If
End
Sub
I do see that when I mouse over the first hyper link column, there is a new tooltip which is for sure causing current tooltip to be disappeared. I think I need a way to NOT Allow tooltip on the hyperlink column. But i couldn;t find a property of Hyperlink column which may be used to control tooltip appearance.
Is there any way to disable tooltip for hyperlink column?
thanks again
Sameers
0
Hi Sameers,
I ran your code and things seem to be working as expected: http://screencast.com/t/YUapAFeKOG. The only changes I had to make were the utilization of a simple, declarative datasource and the removal of the targetControlID.endsWidth condition. You can find my test page attached as a reference.
The regular tooltip that appears on the hyperlink does not affect the RadTooltip, only a second RadToolTip should close the first.
I am using version 2011.2.915, so I advise that you upgrade to it and see how it goes.
All the best,
Marin
the Telerik team
I ran your code and things seem to be working as expected: http://screencast.com/t/YUapAFeKOG. The only changes I had to make were the utilization of a simple, declarative datasource and the removal of the targetControlID.endsWidth condition. You can find my test page attached as a reference.
The regular tooltip that appears on the hyperlink does not affect the RadTooltip, only a second RadToolTip should close the first.
I am using version 2011.2.915, so I advise that you upgrade to it and see how it goes.
All the best,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Sameers
Top achievements
Rank 1
answered on 28 Sep 2011, 09:37 AM
Ah! Great! I found the issue. as you said!
I was using Master Page and the Master page also had RadTooltipManager declared. Later I declared RadTooltip manager on the current page as well to create the tooltip with grid etc as discussed above.
Now when we hover on the hyperlink column, it tries to display the tooltip (using Tooltip manager on the master page) and hence was causing the current tooltip to be closed.
In short, since the tool tip manager on the master page overrides the normal tooltip and use rad tooltip instead, that is why it is causing to close the manually created tooltip on the page.
I have fixed that temporarily by disabling the tooltip (ShowEvent = FromCode) on the master file if user is on current page. But I think there should really be a way to avoid tooltip on hyperlink column. I see on other pages that not all columns have tooltip (I mostly use TemplatEColumn in the grid and add asp:HyperLink to create a hyperlink. But it seems whenever we use HyperLinkColumn of radGrid, it causes to generate a tooltip as well).
Thank you,
Sameers
BTW: I tried to set tooltipManager.Enabled = False but it didn't worked. Shouldn't it stop displaying tooltip if that is set to false?
I was using Master Page and the Master page also had RadTooltipManager declared. Later I declared RadTooltip manager on the current page as well to create the tooltip with grid etc as discussed above.
Now when we hover on the hyperlink column, it tries to display the tooltip (using Tooltip manager on the master page) and hence was causing the current tooltip to be closed.
In short, since the tool tip manager on the master page overrides the normal tooltip and use rad tooltip instead, that is why it is causing to close the manually created tooltip on the page.
I have fixed that temporarily by disabling the tooltip (ShowEvent = FromCode) on the master file if user is on current page. But I think there should really be a way to avoid tooltip on hyperlink column. I see on other pages that not all columns have tooltip (I mostly use TemplatEColumn in the grid and add asp:HyperLink to create a hyperlink. But it seems whenever we use HyperLinkColumn of radGrid, it causes to generate a tooltip as well).
Thank you,
Sameers
BTW: I tried to set tooltipManager.Enabled = False but it didn't worked. Shouldn't it stop displaying tooltip if that is set to false?
0
Hello Sameers,
It seems that you have enabled the Autotooltipify feature of the RadToolTipManager from your master page. This a very probable reason why it is attached to the described grid. The difference between the HyperLink column and other types of columns is that the Hyperlink column renders <a> tags in the cells which have their title property set (i.e. they have a tooltip).
Therefore disabling the master page tooltip like you did is one possible solution. What I'd advise, though, is to set its ToolTipZoneID property to the desired HTML element that contains the controls you wish automatically tooltipified. This way it will ignore the rest of the page and will not try to display a tooltip for your grid's column. This is, of course, if this last grid is not in the zone ;)
You have yet another option - by following the article I linked in my previous post on modifying tooltips of HyperLink column. You can simply remove them. I have modified my test page to do this. Note that the dynamically created grid needs an ID and the dynamic handler I attach. Also the hylerlink column has a unique name so I can access it easily. Please note that it is a bit late in the page lifecycle to add handlers to the RadGrid (as described in this help article on creating a RadGrid programmaticaly, which I advise that you examine regardless of the approach you take), so this may not function correctly in a more complex scenario.
As for your question on the Enabled property - please examine the following article from Microsoft: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.enabled.aspx. This property will not disable the JavaScript, but will change the appearance of the control only. And the tooltip manager has display: none by default.
Regards,
Marin
the Telerik team
It seems that you have enabled the Autotooltipify feature of the RadToolTipManager from your master page. This a very probable reason why it is attached to the described grid. The difference between the HyperLink column and other types of columns is that the Hyperlink column renders <a> tags in the cells which have their title property set (i.e. they have a tooltip).
Therefore disabling the master page tooltip like you did is one possible solution. What I'd advise, though, is to set its ToolTipZoneID property to the desired HTML element that contains the controls you wish automatically tooltipified. This way it will ignore the rest of the page and will not try to display a tooltip for your grid's column. This is, of course, if this last grid is not in the zone ;)
You have yet another option - by following the article I linked in my previous post on modifying tooltips of HyperLink column. You can simply remove them. I have modified my test page to do this. Note that the dynamically created grid needs an ID and the dynamic handler I attach. Also the hylerlink column has a unique name so I can access it easily. Please note that it is a bit late in the page lifecycle to add handlers to the RadGrid (as described in this help article on creating a RadGrid programmaticaly, which I advise that you examine regardless of the approach you take), so this may not function correctly in a more complex scenario.
As for your question on the Enabled property - please examine the following article from Microsoft: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.enabled.aspx. This property will not disable the JavaScript, but will change the appearance of the control only. And the tooltip manager has display: none by default.
Regards,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now