RadGrid in the Tooltip and Hyperlink column issue

6 posts, 0 answers
  1. Sameers
    Sameers avatar
    63 posts
    Member since:
    Oct 2004

    Posted 25 Sep 2011 Link to this post

    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
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 26 Sep 2011 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sameers
    Sameers avatar
    63 posts
    Member since:
    Oct 2004

    Posted 27 Sep 2011 Link to this post

    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
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 28 Sep 2011 Link to this post

    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
    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
  6. Sameers
    Sameers avatar
    63 posts
    Member since:
    Oct 2004

    Posted 28 Sep 2011 Link to this post

    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?
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 30 Sep 2011 Link to this post

    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
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017