Tooltip for radGrid row

23 posts, 1 answers
  1. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 25 Mar 2008 Link to this post

    I want to show a radTooltip for each row of a radGrid individualy for a GridButtonColumn. So if user moves mouse over image of GridButtonColumn I have to determine the row and show LoadOnDemand tooltip with radTooltip Manger with information of correct row. Is this possible? Are there totorials or examples available, I couldn't find any?
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 Mar 2008 Link to this post

    Hello Markus,

    There are such demos in our online resources but I am not quite sure exactly which ones would help you because there is a difference in the scenarios when using RadGrid and RadGrid "Prometheus" and I don't know which version of RadGrid you are using. Therefore I suggest you to check out the following links:

    RadGrid "Prometheus" and RadToolTip:
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/BindToTarget/DefaultCS.aspx
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/ToolTipGrid/DefaultCS.aspx?product=tooltip
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/LoadOnDemand/DefaultCS.aspx

    RadGrid Classic and RadToolTip:
    http://www.telerik.com/community/forums/thread/b311D-hkhhd.aspx


    Please, examine them and in case you experience problems in your implementation, open a new support ticket and send us what you have done so far. As soon as we receive your project, we will do our best to help you.
     
    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 26 Mar 2008 Link to this post

    I use prometheus controls exclusivly so also the radGrid.

    I created follwing column in the Grid:
    <telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="NoFilter" 
        FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="" 
        SortExpression="" UniqueName="Info">  
        <HeaderTemplate> 
            Datum  
        </HeaderTemplate> 
        <ItemTemplate> 
            <asp:LinkButton ID="lnkBOInfo" runat="server"><img runat="server" id="imgBOInfo" alt="" src="images/dialog/info.gif" style="border:0px;vertical-align:middle;" /></asp:LinkButton> 
        </ItemTemplate> 
    </telerik:GridTemplateColumn> 
     

    I add "imgBOInfo" to the "radToolTipManager". The problem is now that tooltip appears only in the first record. How can I show the tooltip for all records?

    The tooltip is a "LoadOnDemand" tooltip, In "AjaxUpdate" of "radTooltipManager" I pass values to the "tooltip.aspx" page. One question is now how can I get the "DataKeyValue" of the row where the user has currently the mouse over to pass this value in URL?

  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Mar 2008 Link to this post

    Hello Markus,

    I am not quite sure why only the first record is tooltipified - I suppose that probably you don't add the other targets to the RadToolTipManager's TargetControls collection. Make sure that you do this in the Item_DataBound event handler - this will ensure that the target for each databound record is added.

    For your second question I suggest looking at the following link:
    grid documentation

    In case you experience problems in your implementation, please open a new support ticket and send us what you have implemented so far. Once we receive it we will do our best to help you.


    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 31 Mar 2008 Link to this post

    Hello Swetlina!

    1. Thanks for help, I add the control to tooltipify to radToolTipmanager as posted in my last replay and in the Online-Demo I cannot see the difference to may way.  I hope you can point me in the right direction here, how to add "'all" controls to the TooltipManager.

    2. The link you provide shows how to determine clicket row on client side with "OnRowSelected" but I have no row selected, I need to determin the row server side (code behind) where the mouse pointer is over. Hope you can give me here another tip.

    Thanks in advance.
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Apr 2008 Link to this post

    Hi Markus,

    I prepared a sample project for you which displays a RadToolTip on each row the RadGrid. You will find additional comments in the code, especially where the target controls are added to the RadToolTipManager's TargetControls collection.

    As to your second question, this should be done by detecting the on mouse over event client-side and taking the row index there. After that you should perform a postback and provide this value on the server.
    There are several ways to call a serverside code and pass an argument from the client which vary depending on the scenario. Which one you would choose depends on you, because such task is not directly related to the RadToolTip control. For example you can submit the whole form, use __doPostback() or an AJAX request to run your code on the server - more information on the subject is available in various places in the Net. If you are using RadAjax, you can also use RadAjaxManager's AjaxRequest and pass the arguments with it.



    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 03 Apr 2008 Link to this post

    Hello Swetlina,

    thanks for your help, I get it work with your sample projet!

    But there a two new things:
    1. If the a tooltip is to height and the control for the tooltip is near bottom webbrowser border it doesn't show at the correct position with attribute Position="BottomRight". Is this a setting or a bug?

    2. If you use IE7 (tested on more than one computer, happens only with IE7) and you use sticky="true" there is a strange behaviour. If you have the mouse inside the tooltip and you move the mouse pointer quickly (seems before the tooltip closes automatically.) outside the tooltip to right side the IE7 crashs (message that a problem occures and application must be closed). Bug in tooltip or in IE7?

    Regards Markus

  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 Apr 2008 Link to this post

    Hi Markus,

    Up to your questions:
    1. The RadToolTip's designed behavior is to show always in the visible browser area. Therefore, when it should exceed the screen bounds it recalculates its coordinates and reposition. You can change this behavior by javascript means. For this purpose you should obtain a reference to the RadToolTipManager and set the popupBehavior's keepInScreenBounds property to false as shown below:

      function Configure(sender, args)  
      {      
         sender._popupBehavior.set_keepInScreenBounds(false);  
    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="OnAjaxUpdate" Position="BottomRight" OnClientBeforeShow="Configure">  
                </telerik:RadToolTipManager> 

       2. The RadToolTip's boundary detection was significantly improved in our last, "Futures" build. Therefore I suggest downloading it and testing your project with it. The "Futures" build is available for download from your Client.net account.

    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 08 Apr 2008 Link to this post

    Hello Svetlina,

    thanks for help and information, I get it work

    Regards Markus
  11. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 06 May 2008 Link to this post

    Hello!

    I find out that problem in Ponit 2 still exist.

    Regards Markus
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 May 2008 Link to this post

    Hi Markus,

    Would you please test your scenario with the latest Q1 Release of the RadControls for ASP.NET AJAX, Telerik.Web.UI.dll , Version 2008.1.415.20.

    In case you are still able to reproduce the problem, please open a new support ticket and send us a fully working demo project (including database, user controls, etc. if needed) along with a detailed explanation of the reproduction steps and the desired behavior.

    Once we get it, we will make further research and we will do our best to improve the behavior.

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 08 May 2008 Link to this post

    I alreay use the newest version so I created a new support ticket with a sample project.
  14. John Davis
    John Davis avatar
    119 posts
    Member since:
    Apr 2007

    Posted 12 Feb 2009 Link to this post

    How can I create a tooltip for a GridButtonColumn?

    The following shows how to set up a tooltip
    for a GridBoundColumn or column header but it seems not to work for a GridButtonColumn.
    http://www.telerik.com/help/aspnet-ajax/grdtooltipsforgriditems.html

    At the following URL there is a nice example but I cannot make it work for a GridButtonColumn.
    http://www.telerik.com/community/forums/aspnet-ajax/tooltip/tooltip-for-radgrid-row.aspx

    I want a simple, constant value of the tooltip.  I do not need a complex value of the tool tip that depends on the value in the row clicked (like Product ID).

    Specifically, when the user puts the mouse over the imagebutton in any row I want the tooltip to show "Edit SCS".

    Supplose I add an image button to this example, as in the last column below:

                    <Columns>
                  <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductID" DataType="System.Int32"
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductID"
                            ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductName"
                            FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductName"
                            SortExpression="ProductName" UniqueName="ProductName">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="ToolTipified">
                            <ItemTemplate>
                                <asp:LinkButton ID="targetControl" runat="server">Show Tooltip</asp:LinkButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                         <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/EditSCS.gif" Text="EditSCS"
                 UniqueName="ES" CommandName="Edit" CommandArgument="ES" >
                </telerik:GridButtonColumn>

                    </Columns>

     Can you show how to set up a tooltip for this image button?

  15. John Davis
    John Davis avatar
    119 posts
    Member since:
    Apr 2007

    Posted 12 Feb 2009 Link to this post

     
    I learned I can set up a tooltip easily for an asp:imagebutton using a GridTemplateColumn like this:

    <telerik:GridTemplateColumn CurrentFilterFunction="NoFilter" DataField="Description"
        FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="Description"
        SortExpression="Description" UniqueName="Description">
        <ItemTemplate>
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/EditSCS.gif"
                Text="EditSCS" />
            <telerik:RadToolTip ID="RadToolTipDescription1" runat="server" TargetControlID="ImageButton1"
                RelativeTo="Element" Skin="WebBlue" Position="BottomRight" Animation="None" HideDelay="1000"
                AutoCloseDelay="3500" Width="150px" ContentScrolling="Auto" Text="Edit SCS">
            </telerik:RadToolTip>
        </ItemTemplate>
    </telerik:GridTemplateColumn>

    But I am using a GridButtonColumn so I can capture the RadGrid1_ItemCommand to set up editing for a user control, like this:
    (and I don't know how to set up this code if I use a GridTemplateColumn instead of a GridButtonColumn)

    <rad:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/EditSCS.gif" Text="EditSCS"
                 UniqueName="ES" CommandName="Edit" CommandArgument="ES">

     

    protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
            if (e.CommandName == "InitInsert")
        {
          
            if (((LinkButton)e.CommandSource).CommandArgument == "ES")
            {
                RadGrid1.MasterTableView.EditFormSettings.UserControlName = "~/Controls/UsersControlEditSCS.ascx";
            }
            else
            {
                RadGrid1.MasterTableView.EditFormSettings.UserControlName = "~/Controls/UsersControlEdit.ascx";
            }

  16. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Feb 2009 Link to this post

    Hi John,
    As you do not use Item Template and thus cannot define a RadToolTip for each item, I would recommend that you use RadToolTipManager.
    For example:
    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"
    </telerik:RadToolTipManager> 
     
    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None"  
        OnItemDataBound="RadGrid1_ItemDataBound" 


    code-behind:
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem) 
        { 
            Control button = (e.Item as GridDataItem)["ES"].Controls[0]; 
            if (!Object.Equals(button, null)) 
            { 
                RadToolTipManager1.TargetControls.Add(button.ClientID, true); 
            } 
        } 

    I have attached my test page for your reference.

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  17. John Davis
    John Davis avatar
    119 posts
    Member since:
    Apr 2007

    Posted 15 Feb 2009 Link to this post

    Thank you.  It worked.
  18. Brian O'Halloran
    Brian O'Halloran avatar
    2 posts
    Member since:
    Jun 2008

    Posted 23 Feb 2009 Link to this post

    I am basicly doing what you posted here, and it works, but I have enabled sorting and once the data is sorted the the tooltip does not work correctly.. I think it has to do with ItemDataBound not called after sorting...
  19. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Feb 2009 Link to this post

    Hello Brian,

    I assume that most probably what happens is that the tooltips after the sorting show the old information. If so, please note that if you sort the grid by using AJAX you should also update the RadToolTipManager along with the grid - e.g. if you are using an update panel you should also move the RadToolTipManager in the panel, too.

    You can find a demo which explains the updates of a tooltipified grid below:

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

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  20. Imran Javed Zia
    Imran Javed  Zia avatar
    55 posts
    Member since:
    Jul 2009

    Posted 19 Feb 2010 Link to this post

    Hi,
    We can also use ItemDataBound event for simple tooltip of a grid as:

    <

     

    telerik:GridButtonColumn ButtonType="ImageButton" CommandName="MyCommand" HeaderButtonType="None" UniqueName="MyCommand" ImageUrl="~/MyImage.gif">

     

     

            <HeaderStyle Width="5%" HorizontalAlign="Center" />

     

     

             <ItemStyle Width="5%" HorizontalAlign="Center" />

     

     

    </telerik:GridButtonColumn>

     



    protected

     

    void myGrid_ItemDataBound(object sender, GridItemEventArgs e)

     

    {

         if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)

     

         {

        

            e.Item.Cells[0].ToolTip = "My Custom Simple Tooltip";  // Check your Cell index based on position of Column

     

         }

    }
    Regrads,
    Imran Javed Zia

  21. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 20 Jul 2010 Link to this post

    hello all
      This is the tofix only the first record is tooltipified

    <ItemTemplate >
                    <asp:HyperLink ID="HyperLink1" runat="server" Width="10px" Height="50px"
                       >
                       <asp:Image ID="Image2" runat="server" Width="90px" Height="120px" ImageUrl='<%# Eval("imgFile") %>'  ToolTip="Show album"    RelativeTo="Element" Position="MiddleRight" EnableShadow="true"/> </asp:HyperLink>
                    <telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="image2"
                        Animation="Slide" Position="MiddleRight">
                    </telerik:RadToolTip>
                </ItemTemplate>
  22. marbleblue
    marbleblue avatar
    12 posts
    Member since:
    Apr 2008

    Posted 14 Dec 2010 Link to this post

    Hi, I have a bit of an issue with RadToolTip. I have a tooltip showing correctly for each row I need it to within a RadGrid. The tooltip exists in the
    last column.

    Is there a way of allowing the Tooltip to resize itself "outside" of its container (RadGrid)?

    The issue being that depending on the number of rows returned in the table, if there is say only on row returned, the tooptip height will be truncated to only be as big as the table, and not show it's entire contents.

    Cheers for any help.
  23. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 Dec 2010 Link to this post

    Hello Kushel,

     Would you please set RenderInPageRoot="true" and test again? When this property is true, the tooltip is rendered as a form child and I assume that the problem in your case comes from the fact that it is rendered as a child of the grid.

    Let me know whether this fixed the issue.

    Greetings,
    Svetlina
    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.
  24. marbleblue
    marbleblue avatar
    12 posts
    Member since:
    Apr 2008

    Posted 14 Dec 2010 Link to this post

    Perfect, thank you Svetlina.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017