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

Enable/Disable TimePicker in javascript

15 Answers 834 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Trevor
Top achievements
Rank 1
Trevor asked on 11 Jan 2008, 06:33 PM
Hi all,

I found the example on how to disable the DatePicker in the help documentation, but I can't find one that shows how to enable/disable the time picker.  I'm also having trouble figuring out how to do it on my own.

Any suggestions?

Thanks for the help,

Greg

15 Answers, 1 is accepted

Sort by
0
Petja
Telerik team
answered on 14 Jan 2008, 03:10 PM
Hi Greg Dickie,

Here is a sample code how you could achieve disable/enable of Prometheus RadTimePicker control:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
    <script type="text/javascript"
        var timepicker; 
        function pageLoad() 
        { 
             timepicker = $find("<%= RadTimePicker1.ClientID %>"); 
        } 
        function disable() 
        { 
            timepicker.get_dateInput().disable(); 
            $removeHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate);    
        } 
 
        function enable() 
        { 
            timepicker.get_dateInput().enable(); 
            $addHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate);    
        } 
    </script> 
</telerik:RadScriptBlock> 
 
<telerik:RadTimePicker ID="RadTimePicker1" runat="server"
</telerik:RadTimePicker> 

We hope that helps.

All the best,
Petja
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Trevor
Top achievements
Rank 1
answered on 14 Jan 2008, 09:30 PM
Thanks Petja that works great.

Just a warning for others, the code below doesn't work if the time picker is initially disabled on the server side, but it works great for controls that are only enabled/disabled on the client side.
0
Trevor
Top achievements
Rank 1
answered on 29 Jan 2008, 03:58 PM
The example given was working with build 1310, but I recently upgraded to build 1314 and when I disable the time picker when the page loads and then navigate away from the page without enabling it, I get a javascript exception of: Error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

When I debug the issue appears to be caused by this line:

$removeHandler(_2,

"click",this._onTimePopupImageClickDelegate);

Let me know if I need to change something in my logic to accomodate changes that were made between the builds.

Greg

0
Giuseppe
Telerik team
answered on 29 Jan 2008, 04:26 PM
Hello Greg,

Indeed it seems there are some changes to the event handler disposal logic between the two versions. Here is the modified snippet that works with the latest release:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
 
    <script type="text/javascript">  
    var timepicker; 
    var imageClickDelegate; 
     
    function pageLoad()  
    {  
         timepicker = $find("<%= RadTimePicker1.ClientID %>"); 
         imageClickDelegate = timepicker._onTimePopupImageClickDelegate; 
    } 
     
    function disable()  
    {  
        timepicker.get_dateInput().disable();  
        $removeHandler(timepicker.get__timePopupImage(), "click", timepicker._onTimePopupImageClickDelegate); 
        timepicker._onTimePopupImageClickDelegate = null
    }  
 
    function enable()  
    {  
        timepicker.get_dateInput().enable();  
        $addHandler(timepicker.get__timePopupImage(), "click", imageClickDelegate); 
        timepicker._onTimePopupImageClickDelegate = imageClickDelegate
    } 
    </script> 
 
<href="#" onclick="enable();">enable</a> 
<href="#" onclick="disable();">disable</a> 
 
</telerik:RadScriptBlock> 
<telerik:RadTimePicker ID="RadTimePicker1" runat="server"
</telerik:RadTimePicker> 


Hope this helps.


Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Trevor
Top achievements
Rank 1
answered on 29 Jan 2008, 04:37 PM
Thanks for the super quick response Manuel.  I've got it working again.

Greg
0
Leslie Shkolnik
Top achievements
Rank 1
answered on 04 Apr 2008, 09:34 PM
So in my scenario, I am dealing with a DatePicker that IS disabled server side on page load.  How do I enable/disable the control client side in this situation?

Also, I have found two separate postings on how to deal with the enable/disable client side.  Which is the "correct" way?

var dateControl = $find("<%= dateAbsoluteFrom.ClientID %>");
 $get(dateControl.get_DateInput().get_id() + "_text").disabled = "disabled";
OR
dateControl.get_dateInput().disable();

and
 
 dateControl.get_PopupButton().onclick = function()
 {
 dateControl.TogglePopup();
 return false;
 };
OR
args.set_cancel(true);  in the popup event
OR
$addHandler(timepicker.get__timePopupImage(), "click" . . .
          (is this relevant for date picker also?)

0
Leslie Shkolnik
Top achievements
Rank 1
answered on 04 Apr 2008, 09:41 PM
I am using build 1218 of the Prometheus controls.
0
Konstantin Petkov
Telerik team
answered on 07 Apr 2008, 04:52 AM
Hi Leslie,

Please, upgrade to the latest RadControls Prometheus version and use PickerClientObject.set_enabled(false/true) method to disable/enable RadDatePicker client-side.

All the best,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
The Oracle
Top achievements
Rank 1
answered on 27 Jun 2008, 03:54 PM
Hey guys/gals--

Something weird is going on here.  I tried your code, among other things, and it doesn't work.  I wonder if I have something out of sync, or maybe I'm supposed to be running core.js explicitly?

For example, when I tried to execute your code on the radTimePicker, I get an error:

code: picker.set_enabled(false)

error: Object doesn't support this property or method

But I can execute this code (either line works), with no problem:

picker.set_enabled = false;  //works  
picker.disabled = true;  //works  
 

The documentation says do this, but it doesn't work either:

var timepicker = $find("<%= RadTimePicker1.ClientID %>";   //works  
timepicker.set_selectedDate(date);   //does not work  
timepicker.get_dateInput().disable();   //does not work; stumbles on get_dateInput() with "object does not support this property or method"  
 

I'm using version 619 of ASP.NET AJAX.

Thanks,
Graeme
0
Konstantin Petkov
Telerik team
answered on 30 Jun 2008, 05:27 AM
Hello The Oracle,

There is an error in your JS line -- the end line bracket is missing:

var timepicker = $find("<%= RadTimePicker1.ClientID %>";   //works

I suppose the script debugging is disabled in your IE. If you enable it, you can also add a debugger as a next line to see what methods/properties the "timepicker" object provides.

I hope this helps.

Best wishes,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
The Oracle
Top achievements
Rank 1
answered on 30 Jun 2008, 03:18 PM
Hey, Konstantin--

Thank you for pointing out my grammatical error!!! :-D

Actually, that line is not my actual code.  I copied that line from one of Petja's entries, and I left off the end.  Sorry for wasting time.

My actual question was about the functions listed in the documentation vs. what happens in reality.  Using debugger, I have found that a number of the properties/methods are not there, or are expressed differently.

For example, the doc says I can use "picker.set_enabled(false);" but I found this doesn't work.  However, "picker.set_enabled = false;" does work.

Is there something I am not doing right?  For example, should I list core.js in the ScriptManager?  Or does it look like my Telerik.Web.UI.dll is not in synch with the documentation?

Any help with this would be GREATLY appreciated as converting to AJAX is hampered by these discrepancies.

Thanks,
Graeme
0
Konstantin Petkov
Telerik team
answered on 01 Jul 2008, 06:59 AM
Hello,

I've just tested that with the latest official Telerik.Web.UI.dll release, version labeled 2008.1.619. The example below functions properly on my end:

        <asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager> 
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker> 
        <br /> 
        <script type="text/javascript"
            function disable() 
            { 
              var picker = $find("<%= RadDatePicker1.ClientID %>"); 
              picker.set_enabled(false); 
            } 
 
            function enable() 
            { 
             var picker = $find("<%= RadDatePicker1.ClientID %>");        
             picker.set_enabled(true); 
            }         
        </script> 
        <input type="button" value="disable" onclick="disable()" /> 
        <input type="button" value="enable" onclick="enable()" /> 
 

Let us know if further assistance is needed.

All the best,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
The Oracle
Top achievements
Rank 1
answered on 02 Jul 2008, 07:33 PM
Dear Konstantin,

I set up a small project and used your code.  It works.

But it doesn't work in my app.  Here are the only clues I have so far.
1. This used to be a r.a.d.Controls 'Classic' app. which I have converted.
2. $find("<% = TimePicker1.ClientID %>") returns null.
3. $get("<% = TimePicker1.ClientID %>") returns an object (tag=<SPAN>), but the object has no methods to speak of; hence your code fails.

I feel I have something configured improperly.  Are these clues helpful, or can you shed some light on this is another way?

Thanks so much for your enduring help.  Your team is AWESOME!

Graeme


0
The Oracle
Top achievements
Rank 1
answered on 02 Jul 2008, 08:06 PM
OK,

I set up some buttons and script in a different form, but very similar.  The code works!

However, I don't know why $find('clientid') fails in my other form.  Any ideas?

Thanks,
Graeme
0
The Oracle
Top achievements
Rank 1
answered on 02 Jul 2008, 08:25 PM
Now this is getting weird.

I added another TimePicker to the page that isn't working, and buttons and code: and it works!

This doesn't make sense: the new code is in the same script block, and $find works fine.  Grr....

Graeme
Tags
Calendar
Asked by
Trevor
Top achievements
Rank 1
Answers by
Petja
Telerik team
Trevor
Top achievements
Rank 1
Giuseppe
Telerik team
Leslie Shkolnik
Top achievements
Rank 1
Konstantin Petkov
Telerik team
The Oracle
Top achievements
Rank 1
Share this question
or