Enabled client-side

8 posts, 0 answers
  1. grnbeagle
    grnbeagle avatar
    9 posts
    Member since:
    Jun 2007

    Posted 19 Sep 2007 Link to this post

    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




  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 21 Sep 2007 Link to this post

    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:)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. grnbeagle
    grnbeagle avatar
    9 posts
    Member since:
    Jun 2007

    Posted 24 Sep 2007 Link to this post

    great. that's exactly what i needed.
  5. grnbeagle
    grnbeagle avatar
    9 posts
    Member since:
    Jun 2007

    Posted 25 Sep 2007 Link to this post

    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



  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 26 Sep 2007 Link to this post

    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
  7. grnbeagle
    grnbeagle avatar
    9 posts
    Member since:
    Jun 2007

    Posted 26 Sep 2007 Link to this post

    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> 
     



  8. grnbeagle
    grnbeagle avatar
    9 posts
    Member since:
    Jun 2007

    Posted 27 Sep 2007 Link to this post

    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
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Sep 2007 Link to this post

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