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

Enabled client-side

7 Answers 189 Views
Slider
This is a migrated thread and some comments may be shown as answers.
grnbeagle
Top achievements
Rank 1
grnbeagle asked on 19 Sep 2007, 04:02 PM
Hi,

Based on your documentation, the slider exposes a number of client-side functions: http://www.telerik.com/help/radcontrols/prometheus/RadSliderClientObject.html

I'm trying to enable/disable the slider on the client-side. It needs to be disabled while data is being processed via ajax and enabled back when it's done.

var slider = $find('telSlider');
slider.set_Enabled(false);

// xmlhttprequests started
...

// inside xmlhttprequests call back
slider.set_Enabled(true);

However, the slider is enabled whole time. Is the client-side set_Enabled working correctly? Is there other syntax that I need to be using?

Thanks so much in advance,
Amie




7 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 21 Sep 2007, 01:11 PM
I found the following example :
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Slider/Examples/ClientSideAPI/DefaultCS.aspx

Related part from the code:
 function ToggleEnabled()  
                {  
                    var slider = GetSlider();  
                    slider.set_Enabled(!slider.get_Enabled());  
                    slider.Redraw();  
                }  
 
I hope it will help you:)
0
grnbeagle
Top achievements
Rank 1
answered on 24 Sep 2007, 07:34 PM
great. that's exactly what i needed.
0
grnbeagle
Top achievements
Rank 1
answered on 25 Sep 2007, 05:02 PM
I've been playing with this Redraw() method, and found that it resets the value and invokes the client-side OnClientValueChange function.

slider.set_Enabled(true); 
console.debug('before: ' + slider.get_Value()); 
slider.Redraw(); 
console.debug('after: ' + slider.get_Value()); 
The debug code in line 2 and 4 return the same value. However, the callback function is called (implying the value has changed) with a default value instead of the new value the slider is changed to. This only happens when I drag and drop the slider drag handle; does not happen if I click on a new tick mark.

Is there a way to prevent that? Please let me know if this is not clear.

Thanks in advance,
Amie



0
Tsvetie
Telerik team
answered on 26 Sep 2007, 07:45 AM
Hi grnbeagle,
Unfortunate I am not sure I understand completely the problem you have run into. Could you please provide some sample code that illustrates the issue?

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
grnbeagle
Top achievements
Rank 1
answered on 26 Sep 2007, 04:00 PM
Hi Tsvetie,

I've created a test page with a slider and was able to reproduce the issue I was talking about.

Basically, I need to disable the slider while the page gets data and enable it back when it's done. The following page disables the slider for 3 seconds and enables it back for demonstration. (I'm using console.debug command for Firefox Firebug.)

Everything works as expected when you *click* on a new value on the slider. However, when you *drag and drop* the handle to a new value, the value resets to 1. Does something get reset when you call Redraw()?

Let me know if you can reproduce it on your side.

Thanks for your help!
Amie

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Temp.aspx.cs" Inherits="Temp" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
    <title>Slider test</title> 
    <script type="text/javascript"
        function slider_changed_callback(obj) { 
            var sliderVal = obj.get_Value();  
            console.debug('call load_data with: ' + sliderVal); 
            load_data();  
        }     
        function load_data() { 
            enable(false);  
            setTimeout("enable(true)", 3000); 
        } 
        function enable(doEnable) { 
            console.debug((doEnable)? 'enabled' : 'disabled'); 
            var slider = $find('telSlider'); 
            if (slider) { 
                slider.set_Enabled(doEnable); 
                slider.Redraw(); 
            } 
        } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>     
    <div> 
        <telerik:RadSlider ID="telSlider" runat="server" Skin="Web20" 
            MinimumValue="1" 
            MaximumValue="12" Value="8" SlideStep="1"                                                 
            Length="722" AutoPostBack="false" 
            TrackMouseWheel="false" OnClientValueChange="slider_changed_callback" Visible="true" 
         />     
    </div> 
    </form> 
</body> 
</html> 
 



0
grnbeagle
Top achievements
Rank 1
answered on 27 Sep 2007, 05:21 PM
Hi,

Any updates? The deadline is approaching, so I need to come up with a plan if this cannot be resolved. Appreciate your support.

Thanks,
Amie
0
Tsvetie
Telerik team
answered on 28 Sep 2007, 01:37 PM
Hello grnbeagle,
I updated your code and now I believe it works as expected. Please have a look the the following code fragment:
<head id="Head1" runat="server">  
    <title>Slider test</title> 
 
    <script type="text/javascript">    
        var sliding = false;  
        var lastEnabledValue;  
          
        function slider_changed_callback(obj, args) {                
            if(!sliding && obj.get_Enabled())  
            {  
                var sliderVal = obj.get_Value();     
                //console.debug('call load_data with: ' + sliderVal);    
                load_data();    
            }   
        }        
        function load_data() {    
            setTimeout(function(){enable(false);}, 0);     
            setTimeout("enable(true)", 3000);    
        }    
        function enable(doEnable) {    
            //console.debug((doEnable)? 'enabled' : 'disabled');    
            var slider = $find('telSlider');    
            if (slider) {    
                slider.set_Enabled(doEnable);    
                slider.Redraw();    
            }    
        }    
          
        function OnClientSlideStartHandler(sender, args)  
        {  
            sliding = true;  
        }  
          
        function OnClientSlideEndHandler(obj, args)  
        {  
            sliding = false;  
              
            var sliderVal = obj.get_Value();     
            //console.debug('call load_data with: ' + sliderVal);    
            load_data();  
        }  
    </script> 
 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div> 
            <telerik:RadSlider ID="telSlider" runat="server" Skin="Web20" MinimumValue="1" MaximumValue="12" 
                Value="8" SlideStep="1" Length="722" AutoPostBack="false" TrackMouseWheel="false" 
                OnClientValueChange="slider_changed_callback" OnClientSlideStart="OnClientSlideStartHandler" 
                OnClientSlideEnd="OnClientSlideEndHandler" Visible="true" /> 
        </div> 
    </form> 
</body> 
</html> 

The problem comes from the fact that the OnClientValueChange was executed every time the handle moved, leading to the following situation - you are still holding the mouse down and the RadSlider is disabled. The same happens in case you are using the Increase/Decrease handles. That is why I added a global variable that would tell me whether I am still holding the mouse button down - sliding.

I also added a timeout of 0 when disabling the slider, so that there is no problem when using the Increase/Decrease handle.

I added to our TODO list the task to improve the behavior of the RadSlider control in such situations.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Slider
Asked by
grnbeagle
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
grnbeagle
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or