[Solved] Initialize a TimePicker in MVC

[SolutionStream]

Im trying to use a TimePicker in my MVC view but am having some difficulty in initializing the control to the value in my passed in model.  I have tried doing this in a JQuery document.Ready as seen in the code below, but have been unsucessful as of yet.

<telerik:RadTimePicker ID="RadTimePicker1" runat="server" Width="160px"
                        BorderWidth="0px" >
                 <ClientEvents OnPopupOpening="Initsd" />
                 <TimeView StartTime="08:00:00"
                   Interval="00:15:00"
                   EndTime="18:00:00"
                   Columns="4">
                   </TimeView>
                 </telerik:RadTimePicker>

<script type="text/javascript">
         $(function() {
         var StartTimePicker = $find("<%= RadTimePicker1.ClientID %>");
             if (StartTimePicker) {
                 alert("hit");
                 StartTimePicker.set_selectedDate('<%= Model.StartTime %>');
             }
         });
    </script>

Anyone done this yet?

[SolutionStream]

No matter what I do, I get a null object after I call the $find().  Is it possible that this command is getting confused because im calling it in a $.FrameDialog.create({}) modal window?

[Sebastian]

Hi Kier,

You need to add Sys.Application.initialize() call in your javascript block to ensure that the components (including the RadTimePicker instance) will be initialized when you attempt to access them with the $find method. Namely:

<script type="text/javascript">
    Sys.Application.initialize();
         $(function() {
         var StartTimePicker = $find("<%= RadTimePicker1.ClientID %>");
             if (StartTimePicker) {
                 alert("hit");
                 StartTimePicker.set_selectedDate('<%= Model.StartTime %>');
             }
         });
    </script>

I posted a working view (with commented code) which illustrates the approach in the other forum thread you started concering the RadTimePicker control:
http://www.telerik.com/community/forums/aspnet-ajax/calendar/missing-images-stylesheet-in-partialview.aspx

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[SolutionStream]

Yes, that mostly fixed my issue as I am now getting my alerts().  But, using your example, I am still unable to set the field correctly.  I am not sure if it is a format issue or what.  Here is a look at this code before and after render.

<script type="text/javascript">
    Sys.Application.initialize();

    $(function() {
        var StartTimePicker = $find("<%= RadTimePicker_StartTime.ClientID %>");
            if (StartTimePicker) {
                StartTimePicker.set_selectedDate('<%= Model.Appointment.StartTime %>');
            }
        });

</script>

<script type="text/javascript">
    Sys.Application.initialize();

    $(function() {
        var StartTimePicker = $find("ctl00_MainContent_RadTimePicker_StartTime");
            if (StartTimePicker) {
                StartTimePicker.set_selectedDate('1/1/0001 12:00:00 AM');
            }
        });

</script>

[Sebastian]

Hello Kier,

I suppose that you reviewed the demo attached in the other forum thread I referenced. Additionally, can you please verify that you specified MinDate and StartTime values of the time picker to include 01/01/0001 and 12:00 AM? This should be sufficient to set the date/time in case the value is valid datetime.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.