Slider Items and Ticks don't appear in ToolTip

4 posts, 0 answers
  1. WinterKill
    WinterKill avatar
    4 posts
    Member since:
    Sep 2008

    Posted 08 Nov 2008 Link to this post

    Using the Q3 2008 release of the slider control I encountered the rendering issue discussed in the knowledgebase and implemented the workaround (adding the repaint() call). The slider control now renders fine and appears to be working as expected - however, the Items and Ticks UI elements don't appear to be rendering at all.

    Using the same markup on the page produces the desired results but when I move the code to "inside" the tooltip all of the item/tick UI elements no longer appear.

    Anybody else see this behavior?
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 10 Nov 2008 Link to this post

    Hello WinterKill,
    I was able to reproduce the problem you described and added it to our TODO list for SP1. I updated your Telerik points for bringing this issue to our attention.

    For the time being, I can offer you the following workaround:
    <script type="text/javascript">  
    function OnClientShow(sender, args)  
    {  
        var slider = $find('<%= RadSlider1.ClientID %>');  
        slider.repaint();  
        slider._listElement = null;  
        slider._createChildControls();  
    }  
    </script> 

    Sincerely yours,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. WinterKill
    WinterKill avatar
    4 posts
    Member since:
    Sep 2008

    Posted 11 Nov 2008 Link to this post

    Thank you Tsvetie for your reply.

    Related to this and the workaround - the generic code provided works well when there is only one tooltip/slider on the page. I implemented my "slider-in-tooltip" control as a usercontrol and adding more than one of these controls causes the only the last pair to work (obviously because multiple global OnClientShow functions being rendered to the client overwrite the previous existing function with the same name).

    My short-term solution was to write code in the OnClientShow(sender, args) that would be able to associate the appropriate slider with the appropriate tooltip using the sender argument (using a global dictionary to associate the tooltip.ClientID with the slider.ClientID rendered by the server similar to the <%= RadSlider.ClientID %> construct below) However I couldn't find any id's associated with the sender object (or its children) that match the tooltip.ClientID rendered by the server - the closest being sender._element.id but it has additional information appended to the end.

    Am I missing a property of sender (or one of its children) that will give me the correct ClientID? Or is there a better way to utilize the sender argument to get a reference to appropriate slider in order to call the .repaint() etc methods? Or - would it be more appropriate to open an support ticket to answer this kind of question?

    Thanks, WK
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Nov 2008 Link to this post

    Hi WinterKill,
    You can get the ClientID of the RadToolTip using the following code:
    sender.get_id(); 

    There are several ways to determine the ClientID of the RadSlider - for example, in case the RadToolTIp and the RadSlider are in the same INamingContainer, you can use the following approach:

    Place the following code in your page, not in the user control (you need not define the function every time you add the user control to the page):

    <script type="text/javascript">  
    function OnClientShow(sender, args)  
    {  
        var sliderClientID = sender.get_id().replace('RadToolTip1''RadSlider1');  
        var slider = $find(sliderClientID);  
          
        slider.repaint();  
        slider._listElement = null;     
        slider._createChildControls();   
    }  
    </script> 

    , where "RadToolTip1" is the ID of the RadToolTIp and "RadSlider1" is the ID of the RadSlider control:

    user control:
    <telerik:RadToolTip ID="RadToolTip1" runat="server" OnClientShow="OnClientShow"   
        TargetControlID="Label1">  
        <telerik:RadSlider ID="RadSlider1" runat="server" ItemType="Tick"   
        LargeChange="10" SmallChange="5" Height="60"></telerik:RadSlider> 
    </telerik:RadToolTip> 

    In case you have additional problems, it would be best if you open a new support ticket and send us your code with detailed information on the problem you need help with.

    All the best,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top