DevTools for .NET

Answered Text Tooltip Slider with itemstyle="none"

omer

Posted on Jan 13, 2012 (permalink)

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

Reply

omer

Posted on Jan 20, 2012 (permalink)

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>

Reply

Answer Marin Bratanov Marin Bratanov

Posted on Jan 23, 2012 (permalink)

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

Reply

omer

Posted on Feb 10, 2012 (permalink)

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

Reply

omer

Posted on Feb 10, 2012 (permalink)

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

}

Reply

rdmptn

Posted on Feb 15, 2012 (permalink)

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.

Reply