This is a migrated thread and some comments may be shown as answers.

tooltip: { format } bug

14 Answers 271 Views
Slider
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
sitefinitysteve asked on 09 May 2012, 03:01 PM
When I set the tooltip format on the range slider, it's not changing the tooltip format, it's changing the tick label formatting...tooltip is entirely unaffected.

14 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 09 May 2012, 04:42 PM
Hello Steve McNiven-Scott,

I confirm that this is a bug and I am glad to inform you that the bug is fixed. The fix will be included with the next official release of Kendo UI.

Regards,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 11 May 2012, 04:28 PM
Thanks Hristo

Do you happen to know the syntax to MVVM bind that tooltip format property by any chance?
0
Hristo Germanov
Telerik team
answered on 14 May 2012, 08:33 AM
Hi Steve,

You can set the tooltip format via data attributes:

<input id="slider" data-role="slider" data-tooltip='{ "format": "{0:c}" }' />

Regards,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 14 May 2012, 01:29 PM
There's still a bug here

It's a range slider I should say, but this: data-tooltip='{ "format": "test {0} {1}" }

Is still putting the labels on the ticket marks, and the tooltip result is
"test 0 test 4" (assuming 0 is the min and 4 is the max).  What I would want is it to be in the format specified "test 0 4"
0
Hristo Germanov
Telerik team
answered on 14 May 2012, 01:53 PM
Hi Steve,

This is by design (because of the labels format/tooltip). If you have {0:C} format each value will be formatted one by one(for example: tooltip value "$0.00 - $20.00"), but if you what to remove "-" you need to use template in your tooltip. Can you try this: data-tooltip='{ "template": "test #= selectionStart # #= selectionEnd #" }'.

Greetings,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 14 May 2012, 02:07 PM
OH!...that's actually pretty cool (needs to be documented though in your new upcoming doc portal)

However the values are not updating...
data-tooltip='{ "template": "test #= Min # #= Max #" }'
//or
data-tooltip='{ "template": "test #= get("Min") # #= get("Max") #" }'

I see "test 0 10" but the 10 isnt changing as I move the slider
0
Hristo Germanov
Telerik team
answered on 14 May 2012, 02:15 PM
Hi Steve,

I can't understand what values are not updated? What are Min and Max? Can you send me a simple test project which reproduces the depicted issue?

All the best,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 14 May 2012, 02:30 PM
Its the data item values from my model (this is all inside a template to render out a collection)

Video: http://screencast.com/t/gAgvqWGyuUB
(So first is with the format set, the next is without format set)

I wasn't sure what selectionStart\End were...assumed that was the dataItem to bind to so I changed it.  When they are there it throws script errors saying it cant find it.
0
Hristo Germanov
Telerik team
answered on 17 May 2012, 11:59 AM
Hi Steve,

I was able to examine your screencast and I think that this behavior is expected. The values that you show in the tooltip are not updated(the slider hasn't triggered change).

The major idea for selectionStart/End of the RangeSlider and value for the Slider are to show you the current value in the tooltip. When you do mouse up the slider will trigger change event(and it will update the value in your mvvm view model too). You can examine the slider events here.

All the best, 
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 17 May 2012, 02:08 PM
...but that's not how the tooltip is supposed to work.  Who wants a static tooltip when you drag things around, the idea is to show the user what number they're on, not what the previous value was :/

So you're pretty much saying we're not able to define where both numbers showup in the tooltip format then right...cant do "between {0} and {1}" as a tooltip.
0
Hristo Germanov
Telerik team
answered on 22 May 2012, 11:36 AM
Hi,

"...but that's not how the tooltip is supposed to work.  Who wants a static tooltip when you drag things around, the idea is to show the user what number they're on, not what the previous value was :/ " Yes, you are right. This is the reason to implement "selectionStart/End" and "value" (those fields represents the current values and you can use them in the tooltip template). I notice that we haven't documentation for the slider's tooltip template and I will fix this problem.

"So you're pretty much saying we're not able to define where both numbers showup in the tooltip format then right...cant do "between {0} and {1}" as a tooltip." Unfortunately, you can't do it with the format, because of the ticks value/tooltip(as i mention in one of my previous replies). But you can achieve this functionality with template:

data-tooltip = '{ "template": "between #= selectionStart # and #= selectionEnd #" }'
All the best,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 22 May 2012, 01:59 PM
This doesn't work still (at least when my template is referencing array elements

data-tooltip = '{ "template": "between #= Capacity[0] # and #= Capacity[1] #" }'

Again it's just static text that contains the previous values...I assume this is because I changed to an array over two seperate min\max values?
0
Hristo Germanov
Telerik team
answered on 25 May 2012, 09:12 AM
Hi Steve,

Can you examine this jsFiddle example and tell me if you don't understand something.

All the best,
Hristo Germanov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 25 May 2012, 01:13 PM
Ooooh...."selectionStart" and "selectionEnd" are internal values then!  I thought they were properties on the model.
Tags
Slider
Asked by
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Answers by
Hristo Germanov
Telerik team
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Share this question
or