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
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
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:
I hope it will help you:)
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(); |
} |
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.
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
slider.set_Enabled(true); |
console.debug('before: ' + slider.get_Value()); |
slider.Redraw(); |
console.debug('after: ' + slider.get_Value()); |
Is there a way to prevent that? Please let me know if this is not clear.
Thanks in advance,
Amie
0
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
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
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
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
Hello grnbeagle,
I updated your code and now I believe it works as expected. Please have a look the the following code fragment:
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
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