[VB.NET/Tooltips] Tooltips for GridButtonColumn

[Michiel Peeters]

I've a RadGrid with two GridButtonColumn's in front of it. Those two columns give the possibility to edit or delete rows in the RadGrid (these columns have an image displayed). Only I want to set some tooltips on every image like, Edit the row or Delete this row. How can i achive this? I've searched here on the forums and google but didn't find an answer on it. This is the code what i have currently:

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If e.Item.GetType() Is GetType(GridDataItem) Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim btn As ImageButton

        If item("Delete").Controls(0) IsNot Nothing Then
            btn = DirectCast(item("Delete").Controls(0), ImageButton)
            btn.ToolTip = "Delete this item"
            btn.AlternateText = "Delete this item"
        ElseIf item("Edit").Controls(0) IsNot Nothing Then
            btn = DirectCast(item("Edit").Controls(0), ImageButton)
            btn.ToolTip = "Edit this item"
            btn.AlternateText = "Delete this item"
        End If
    End If
End Sub

I've found the following topics:

http://www.telerik.com/community/forums/aspnet/grid/radgrid-button-column-tooltip.aspx
http://www.telerik.com/help/aspnet/grid/grdtooltipsforgriditems.html
http://www.telerik.com/community/forums/aspnet/grid/tooltip-for-gridbuttoncolumn-itemstyle.aspx

How can I set tooltips on an ImageButton (GridButtonColumn)?

[Princy]

Hello Michiel,

Check out the following code snippet which shows how to set ToolTip for GridButtonColumn

ASPX:

<telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="Edit" CommandName="Edit">
</telerik:GridButtonColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="Delete" CommandName="Delete">
</telerik:GridButtonColumn>

VB.NET:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim editbtn As ImageButton = DirectCast(item("Edit").Controls(0), ImageButton)
        editbtn.ToolTip = "Edit this item"
        editbtn.AlternateText = "Edit this item"
        Dim deletebtn As ImageButton = DirectCast(item("Delete").Controls(0), ImageButton)
        deletebtn.ToolTip = "Delete this item"
        deletebtn.AlternateText = "Delete this item"
    End If
End Sub

Thanks,
Princy.

[Michiel Peeters]

To bad, it didn't work. I've added extra information how I build up my columns.

Dim ec As New GridButtonColumn With {.UniqueName = "Edit", .CommandName = "Edit", .ButtonType = GridButtonColumnType.ImageButton, .Reorderable = False, .Resizable = False, .ImageUrl = "~/App_Themes/" & Page.Theme & "/img/write_16.png"}

ec.HeaderStyle.Width = Unit.Pixel(30)
ec.ItemStyle.Width = Unit.Pixel(30)

RadGrid1.MasterTableView.Columns.Insert(0, ec)

This code snippet is also used to create the delete column. It is really wierd why my tooltips don't pop up.

[Princy]

Hello Michiel,

Check whether you have attached ItemDataBound event properly. Is this issue happening for all browsers?

Thanks,
Princy.

[Chris McGrath]

I just had the same need, though I was able to get it to work easily enough in the ItemDataBound event.

However, I'd like to request that a property be added to the GridButtonColumn for ImageButtonToolTip.  Tooltips can be set for the header and for filter items, it seems logical that you should be able to set this as a property just like in any other Image Button rather than having to write code to do it.

[Marin]

Hello Chris,

Thank you for this suggestions.

We will consider implementing this feature for the upcoming release of RadControls for ASP.NET AJAX

Greetings,
Marin
the Telerik team

[Marin]

Hi,

Just a short follow-up on the above request.

I would like to inform you that currently you can set the tooltip of an image in GridButtonColumn using its Text property (as well as DataTextField and DataTextFormatString to format the text). Basically any way to set and format the text when the ButtonType is LinkButton will be applied as a tooltip in the case of ImageButton.

Kind regards,
Marin
the Telerik team

[Jerry T.]

Hello, Marin.

I've tried all kinds of ways of setting attributes for a GridButtonColumn and I cannot get tooltips to work:

<telerik:GridButtonColumn CommandName="Delete" ButtonType="LinkButton" Text="Delete" ConfirmText="Are you sure you want to delete this Contact from this Program?" UniqueName="DeleteColumn" ButtonCssClass="buttonDeleteSmall" HeaderTooltip="Delete" HeaderStyle-Width="25px" />
<telerik:GridButtonColumn CommandName="AddNote" ButtonType="LinkButton" Text="" UniqueName="AddNote" HeaderStyle-Width="25px" ButtonCssClass="buttonAddNoteSmall" HeaderTooltip="Add Note" />
<telerik:GridButtonColumn CommandName="AddTask" ButtonType="LinkButton" ButtonCssClass="buttonCalendarSmall" Text="" UniqueName="AddTask" HeaderStyle-Width="25px" HeaderToolTip="Add Task" />

In none of those columns will a Tooltip appear when hovering over an image.  And in the first column, of course, the text "Delete" shows up under the image which looks horrible.

[Marin]

Hi Jerry,

 The suggested approach in the previous post works when you have set the ButtonType for the column to ImageButton and respectively specify the ImageUrl (instead of configuring the image in the css class):

<telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" ImageUrl="icon.png" ... >

All the best,
Marin
the Telerik team

[Jerry T.]

That would be easy to do but the image is a sprite containing multiple images, hence the need to use CSS to specifiy the proper offsets.

There really should just be a Tooltip attribute for the LinkButton (or any Telerik control like that)

Jerry

[Marin]

Hello Jerry,

 Thank you for the valuable feedback.

For now one possible workaround would be to access the LinkButton for the column in the ItemDataBound event and set there the desired tooltip:

void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        if (dataItem!=null)
        {
            (dataItem["DeleteColumn"].Controls[0] as LinkButton).ToolTip = "My Tooltip!";
        }
    }

All the best,
Marin
the Telerik team

[Jerry T.]

Thanks, Marin.

If the Tooltip property can be set in the codebehind, why can't it be set as an attribute for the control in the markup??

Too many times the solution is to add something in the codebehind in the itemdatabound or something. Telerik really needs to add more capabilities of setting these things in the markup so we're not having to write all of that extra code to run on the server.

Jerry

[Marin]

Hi Jerry,

 The tooltip property of the link button is not exposed through the markup of the GridButtonColumn that is why you cannot set it declaratively. We will consider adding such options for future versions of the controls upon popular demand. If you wish to set this property in the markup you can add a GridTemplateColumn with a LinkButton inside its ItemTemplate and configure the button according to your needs.

Hope this helps.

All the best,
Marin
the Telerik team

[Jerry T.]

Marin,

We will probably have to go that route but, again, that's writing a few extra lines of code that are completely unnecessary if a Tooltip attribute existed!

[Erik]

Hello Telerik,

This is still an isseu in 2013 Q2...

Erik

[Marin]

Hi,

You can suggest future improvements for the controls in our feedback portal:
http://feedback.telerik.com/Project/108 where you can vote and track its progress.

Regards,
Marin
Telerik