RadGrid in the Tooltip and Hyperlink column issue

[Sameers]

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

<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

[Marin Bratanov]

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

[Sameers]

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.

  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

[Marin Bratanov]

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

[Sameers]

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?

[Marin Bratanov]

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