RadToolTipManager and RadToolBar

9 posts, 2 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 20 Apr 2010 Link to this post

    I want to use the LoD functionality of RadToolTipManager with a number of buttons defined in a RadToolBar.

    Everything I've read suggests that I need to update the TargetControls collecton with the ID of the button. Now, I can't /set/ the ID of a ToolBarButton, but I can get at the ClientID of one, so, I'm doing this ...
    RadToolBarButton btn = RadToolBar1.FindItemByValue("MoveFiles"as RadToolBarButton; 
    RadToolTipManager1.TargetControls.Add(btn.ClientID, true); 

    I have wired up the OnAjaxRequest event of the ToolTipManager but it never fires.

    I can't figure out why.

    Can anyone help?

    --
    Stuart
  2. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 22 Apr 2010 Link to this post

    Could we see your RadToolTipManager tag settings? I noticed you said your handling the RadToolTipManager's OnAjaxRequest event, although its called OnAjaxUpdate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Apr 2010 Link to this post

    Hi guys,

    The RadToolBar's items does not actually have a default ID and thus this manner of tooltipifying will not work for this case. In order to achieve the desired result you should associate IDs on the server or create the tooltips on the client. Both the server and the client approaches are shown in the following demos:

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

    The demos are not using a RadToolBar in particular but you should follow the same logic.


    Kind regards,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Apr 2010 Link to this post

    Hey Svetlina, long time no speak.

    Thanks for that. I'm going to have a play with this, but, sadly, I'm using Q1 2009 still so some of the JS methods the examples you pointed me at don't exist!

    --
    Stuart
  6. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Apr 2010 Link to this post

    Svetlina,

    Can I ask you to look at this SWF movie I've made of the code posted below in action?

    This is the markup for the project...
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2007" style="width:100%" OnItemCreated="RadToolBar1_ItemCreated"
            <Items> 
                <telerik:RadToolBarButton CommandName="undo" ImageUrl="Images/undo_16x16.png" /> 
                <telerik:RadToolBarButton CommandName="redo" ImageUrl="Images/redo_16x16.png" /> 
                <telerik:RadToolBarButton IsSeparator="true" /> 
                <telerik:RadToolBarButton CommandName="delete" ImageUrl="Images/delete_16x16.png" /> 
                <telerik:RadToolBarButton CommandName="cut" ImageUrl="Images/cut_16x16.png" /> 
                <telerik:RadToolBarButton CommandName="paste" ImageUrl="Images/paste_16x16.png" /> 
            </Items> 
        </telerik:RadToolBar> 
         
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="BrowserWindow" Position="BottomRight" ShowCallout="false" Skin="WebBlue" Animation="Slide" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
        </telerik:RadToolTipManager> 
         
        </form> 
    </body> 
    </html> 

    And this is the code behind ...
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using Telerik.Web.UI; 
     
    namespace WebApplication1 
        public partial class WebForm3 : System.Web.UI.Page 
        { 
     
            protected override void OnLoad(EventArgs e) 
            { 
                base.OnLoad(e); 
                if (!IsPostBack) 
                { 
                    foreach (RadToolBarItem i in RadToolBar1.Items) 
                    { 
                        if (i is RadToolBarButton) 
                        { 
                            RadToolBarButton btn = i as RadToolBarButton; 
                            if (!String.IsNullOrEmpty(btn.CommandName)) 
                            { 
                                btn.Attributes["id"] = Guid.NewGuid().ToString(); 
                                btn.Value = String.Format("{0}:{1}", btn.CommandName, btn.Attributes["id"]); 
                                RadToolTipManager1.TargetControls.Add(btn.Attributes["id"], btn.Value, true); 
                            } 
                        } 
                    } 
                } 
            } 
     
            protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e) 
            { 
                string[] args = e.Value.Split(new char[] {':'}); 
                Literal l = new Literal(); 
                l.Text = String.Format("Command: <strong>{0}</strong><br/>ID: <strong>{1}</strong>", args[0], args[1]); 
                e.UpdatePanel.ContentTemplateContainer.Controls.Add(l); 
            } 
        } 
     

    If you watch he movie, you'll see that as the tooltips are repeatedly shown, they move rightward across the page until the have to start wrapping to on.

    What's going on here?

    BTW, this project uses Q1 2009 controls.

    --
    Stuart


  7. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Apr 2010 Link to this post

    I forgot to say...

    It's not too obvious in the small browser window I used for the movie, but the code clearly defines that the tooltip should appear in the lower-right corner of the browser, when it appears, in fact, in the lower-left.

    -- 
    Stuart
  8. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Apr 2010 Link to this post

    Hello Stuart,

    I tested the code you provided and I reproduced similar issue to the one shown on the video capture and the reason for this behavior is that  there is not explicit width set and the OnAjaxUpdate event is used. This is expected behavior in such case with the current implememtation of the tooltip - the content of the tooltip is loaded through AJAX and the tooltip cannot "predict" the width it has to have when it is shown. Thus it shows at some coordinates and after that the resize takes place and as a result the position is not the correct.

    This being said, you should set the Width property explicitly and to use the ContentScrolling property to the desired value in order to determine the behavior when the width should be bigger than the set. If you want the tooltip to resize accordingly you should set it to Default.

    We are currently working on improving this behavior but for the time being some explicit size set is the best solution for the case.


    Regards,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 03 May 2010 Link to this post

    Svetlina,

    Thanks for that. I've tried your suggestion on my Q1 2010 version and it works as expected. I'll try it with the Q1 2009 code tomorrow.

    -- 
    Stuart
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 May 2010 Link to this post

    Hello Stuart,

    I am glad to hear that my reply was helpful! In case you need further assistance or additional questions, do not hesitate to contact me again, I will be happy to assist!


    Best wishes,
    Svetlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017