Toggle visibility of DragHandle prevents slider from selecting selected item

[Elmar De Groot]

Goal:
Slider control is displayed without the draghandle. When the user selects an item on the slider the drag handle becomes visible and is positioned on the selected item. 

Problem:
Hiding the draghandle is a piece of cake which is done server side. Because I don't want to postback when the user selects an item on the slider I've used the clientscript object model to watch for events.

Initially I looked for OnClientValueChange to toggle visibility, however this only fires if the selected item is different then the initial value. When the user selected the first item on the slider, the event wasn't fired ;(

So that let me to start using OnClientBeforeValueChange which fires regardless of change, but here's the thing when I call sender.set_showDragHandle(true), effectively displaying the drag handle on the slider control, it moves to the first item in the list and completely ignores the location of selected item...

Any suggestions would be much appreciated,
Elmar

[Tsvetie]

Hi Elmar,
You can use the following code to get the described behavior:

<telerik:RadSlider ID="RadSlider1" runat="server" ShowDragHandle="false" ItemType="Item" Height="50px"
    TrackPosition="BottomRight" OnClientBeforeValueChange="OnClientBeforeValueChange"
    OnClientLoaded="OnClientLoaded">
    <Items>
        <telerik:RadSliderItem Text="Item 1" />
        <telerik:RadSliderItem Text="Item 2" />
        <telerik:RadSliderItem Text="Item 3" />
        <telerik:RadSliderItem Text="Item 4" />
        <telerik:RadSliderItem Text="Item 5" />
    </Items>
</telerik:RadSlider>

<script type="text/javascript">
var firstChange = false;
function OnClientLoaded(sender, args)
{
    firstChange = true;
}

function OnClientBeforeValueChange(sender, args)
{
    if(firstChange)
    {
        firstChange = false;
        var newValue = args.get_newValue();
        args.set_cancel(true);
        sender._animationPending = false;

        sender.set_showDragHandle(true);
        sender.set_value(newValue);
    }
}
</script>

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.