Enable/Disable TimePicker in javascript

[Trevor]

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

[Petja]

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

[Trevor]

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.

[Trevor]

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

[Giuseppe]

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>

<a href="#" onclick="enable();">enable</a>
<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

[Trevor]

Thanks for the super quick response Manuel.  I've got it working again.

Greg

[Leslie Shkolnik]

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?)

[Leslie Shkolnik]

I am using build 1218 of the Prometheus controls.

[Konstantin Petkov]

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

[The Oracle]

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

[Konstantin Petkov]

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

[The Oracle]

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

[Konstantin Petkov]

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

[The Oracle]

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

[The Oracle]

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

[The Oracle]

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