[VB.NET/Tooltips] Tooltips for GridButtonColumn

16 posts, 0 answers
  1. Michiel Peeters
    Michiel Peeters avatar
    46 posts
    Member since:
    Apr 2010

    Posted 08 Feb 2011 Link to this post

    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)?

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Feb 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michiel Peeters
    Michiel Peeters avatar
    46 posts
    Member since:
    Apr 2010

    Posted 08 Feb 2011 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Feb 2011 Link to this post

    Hello Michiel,

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

    Thanks,
    Princy.
  6. Chris McGrath
    Chris McGrath avatar
    23 posts
    Member since:
    Dec 2009

    Posted 22 Feb 2011 Link to this post

    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.
  7. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 01 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  8. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 07 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  9. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 14 Jun 2011 Link to this post

    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.
  10. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 15 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 15 Jun 2011 Link to this post

    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
  12. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 16 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  13. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 16 Jun 2011 Link to this post

    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
  14. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 16 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  15. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 16 Jun 2011 Link to this post

    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!
  16. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 30 Jan 2014 Link to this post

    Hello Telerik,

    This is still an isseu in 2013 Q2...

    Erik
  17. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 04 Feb 2014 Link to this post

    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
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017