Text Tooltip Slider with itemstyle="none"

8 posts, 1 answers
  1. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 13 Jan 2012 Link to this post

    Hello guys

    i am using demo slider with tooltip in this link Range Slider
    I need to use slider without item style but with text tooltip.
    when user sliding handle i need to display text in tooltip. 
    when 1-A
    when 2- B etc

    any starting point or advice?

    Regards

    Omer

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3597 posts

    Posted 17 Jan 2012 Link to this post

    Hello Omer,

    I believe the following demo is quite close to your requirement on showing tooltips: http://demos.telerik.com/aspnet-ajax/slider/examples/databinding/defaultcs.aspx.

    Another approach would be to use the drag handles and the OnClientValueChanged event to get the new value as well as the handle that was dragged, then set the value (or a modified string, depending on your custom scenario) to the tooltip. I am attaching to this post a simple page that shows this in action and uses the demo you linked as base: http://screencast.com/t/PZoeacEOej.



    All the best,
    Marin
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 20 Jan 2012 Link to this post

    Thank you for your answer Marine. 
    I will try both of advice. 
    By the way can you help me to set logic of this java script code?
    I need display text in my slider tooltip with itemstyle="none"
    Thank you in advance..

    Ömer


        <script type="text/javascript">
            var theTooltip = null;
            function pageLoad()
            {
                theTooltip = $find("RadToolTip1");
            }
     
            function OnClientValueChanged(sender, args)
            {
                var newValue = args.get_newValue();
                var handle = sender.get_activeHandle();
                theTooltip.set_targetControl(handle);
    ---------
    if handle = 1 ;
    theTooltip.set_text(A);
    if handle = 2 ;
    theTooltip.set_text(B);
    ...
    something like this..
    -----------------
                theTooltip.set_text(newValue);
                setTimeout(function ()
                {
                    theTooltip.show();
                }, 20);
            }
        </script>
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3597 posts

    Posted 23 Jan 2012 Link to this post

    Hi Ömer,

    You can simply create a JavaScript object that will act as a dictionary. You can see how this is done in this article for example (or in any other internet resource). Then, instead of adding a switch statement with many lines of code you can simply add the expected values from the slider as keys for the array (when you create it. When and how this happens is up to your custom logic and scenario) and simply use newValue = myArray[args.get_newValue()]; as this newValue variable is already being set as the text.


    Kind regards,
    Marin
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 10 Feb 2012 Link to this post

    Thank you for reply. 

    i did it like your advice and it works.

    var myArray = new Array();
    myArray['1'] = 'sample1';
    myArray['2'] = 'sample2';
    myArray['3'] = 'sample3';
    myArray['4'] = 'sample4';
    newValue = myArray[args.get_newValue()];
    tooltip.set_text(newValue);
  7. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 10 Feb 2012 Link to this post

    any advice for range slider tooltip? :)

    function UpdateToolTipText2(tooltip, slider) {
        var div = document.createElement("div");
        div.style.whiteSpace = "nowrap";
        if (slider.get_itemType() == Telerik.Web.UI.SliderItemType.Item)
            div.innerHTML = (slider.get_selectedItems()[0].get_text() + " / " + slider.get_selectedItems()[1].get_text());
        else
            div.innerHTML = (slider.get_selectionStart() + " / " + slider.get_selectionEnd());
     
        tooltip.set_contentElement(div);
    }
  8. rdmptn
    rdmptn avatar
    72 posts
    Member since:
    Aug 2011

    Posted 15 Feb 2012 Link to this post

    I am not sure what your problem with this code is or what you are trying to achieve, but have you examined the Online demos? There is a demo with a range slider and a tooltip right here: http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx. You can take a look at the slider demos and at the tooltip demos for more ideas. You can also examine their documentation for an API list - here for the slider, and here for the tooltip.
  9. omer
    omer avatar
    65 posts
    Member since:
    Nov 2010

    Posted 15 Feb 2012 Link to this post

    i need to iplement this logic to tooltip which for rangeslider.

    regards
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017