Tooltipify Image in Template Column

[Kori]

Hi, I have a RadGrid that gets bound with template columns that contain a single image (it's an indicator light). Here's the code for the template column:

Public Class GridImageItemColumn
   Inherits GridTemplateColumn

   Public Class GridImageItemTemplate
      Implements ITemplate

      Public column As GridImageItemColumn = Nothing

      Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
         Dim image as New Image()
         image.ID = Me.column.UniqueName
         container.Controls.Add(image)
         AddHandler image.DataBinding, AdressOf image_DataBinding
      End Sub

      Private Sub image_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
         Dim dataItem As GridDataItem = CType(CType(sender, Control).NamingContainer, GridDataItem)
         If dataItem IsNot Nothing Then
         Dim image As Image = CType(sender, Image)
         image.CssClass = "t_img"
         Dim value As String = DataBinder.Eval(dataItem.DataItem, Me.column.DataField).ToString()
         If Not String.IsNullOrEmpty(value) Then
            image.ImageUrl = "~/images/" & value & ".png"
         End If
      End Sub
   End Class

   Public Sub New()
      Dim template As New GridImageItemTemplate()
      template.column = Me
      Me.ItemTemplate = template
   End Sub

What I'm wondering is, how can I dynamically tooltipify these indicator lights? I've tried to do it via how the example states:

Me.RadToolTipManager1.TargetControls.Add(target.ClientID, (TryCast(e.Item, GridDataItem)).GetDataKeyValue("ID").ToString(), True)

but .. that doesn't work since I have no way to find the target Image control, since the name isn't static (it isn't static, because there are n number of these columns).

Any clues?

[Svetlina Anati]

Hi Kori,

The image is rendered multiple times but its ClientID is different for every row and it is always the same - this being said you can tooltipify it by using the ClientID after you have found it by using the FindControl method as shown below:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs)
           If e.Item.ItemType = GridItemType.Item OrElse e.Item.ItemType = GridItemType.AlternatingItem Then
               Dim target As Control = e.Item.FindControl("targetControl")
               If Not [Object].Equals(target, Nothing) Then
                   If Not [Object].Equals(Me.RadToolTipManager1, Nothing) Then
                       'Add the button (target) id to the tooltip manager
                       Me.RadToolTipManager1.TargetControls.Add(target.ClientID, (TryCast(e.Item, GridDataItem)).GetDataKeyValue("ProductID").ToString(), True)
                   End If
               End If
           End If
       End Sub

The code above is part of the following demo which has the same scenario but with a hyperlink - the logic with an image is the same:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx

I hope that the provided information and demo are helpful, let me know how it goes.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kori]

But what I'm saying - is that I don't know the ID to be able to run e.Item.FindControl("targetControl") - since I'm binding it to the column's uniquename.

I can't set the Image ID to "targetControl" as I have multiple of these columns and I'll get the:
Multiple controls with the same ID 'targetControl' were found

error occurring.

Suggestions?

[Svetlina Anati]

Hi Kori,

I am afraid that there is some misunderstanding between us - the grid control is an INaming Container and you should not experience such a problem in the common case.

I believe that the best way to proceed is to prepare a sample, fully runnable reproduction demo (use a fake programmatic datasource for the grid or Northwind), open a new support ticket and send it to me along with very detailed reproduction steps and explanations of the actual and the desired result and I will make it work as you require so that you will be able to incorporate the same logic in your original application.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Willem]

Hi,

did you guys manage to fix this issue? I am having the same kind of problem, more or less...

[Svetlina Anati]

Hello kfrancis,

We have not received a reproduction demo yet where we can observe the problem and we are still unable to reproduce it on our side. In order to be able to help we need to debug the setup. This being said, would you please prepare a very simple reproduction demo (you can use a fake programmatic datasource) which is fully runnable and share its full source code along with detailed instructions? Once we can examine the issue, we will do our best to fix it.

All the best,
Svetlina
the Telerik team