Toggle visibility of DragHandle prevents slider from selecting selected item

2 posts, 1 answers
  1. Elmar De Groot
    Elmar De Groot avatar
    3 posts
    Member since:
    Aug 2009

    Posted 05 Aug 2009 Link to this post

    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

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 07 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top