Time picker in advanced template

[Michael Dunbar]

Hello,

I'm trying to use a date picker and a time picker in my advanced insert template, but am having a few issues with the time picker.
Here is my code so far:

<telerik:RadDatePicker  runat="server" ID="rdpStartInsert" SelectedDate='<%# Bind("Start") %>' Skin="Vista" />
<telerik:RadTimePicker runat="server" ID="rtpStartInsert" Width="65px" Skin="Vista" SelectedDate='<%# Bind("Start") %>'>
                                <TimeView ID="timeStartInsert" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
                                    EndTime="18:00" Interval="00:30" />
</telerik:RadTimePicker>

The problems are that the calendar on the time picker does not have a skin and when you click on a time it doesn't update the input box. The date picker works fine.

I tried to follow this demo (http://demos.telerik.com/aspnet-ajax/scheduler/examples/advancedformtemplate/defaultcs.aspx), but I don't understand it to be frank and it seems to be a totally different approach to what I taken via following another getting started demo. I like how the buttons don't appear in the demo and the calendars show on input focus, but again can't see how or where this is done?

Any help would be greatly appreciated.

EDIT: may be worth noting that I can extract data from the two controls without issue on the Appointment Command event with the following, so it just a UI input issue with the time picker control from what I can see:

RadDatePicker startInputDate = (RadDatePicker)e.Container.FindControl("rdpStartInsert");
                RadTimePicker startInputTime = (RadTimePicker)e.Container.FindControl("rtpStartInsert");

                DateTime selectedStartDate = startInputDate.SelectedDate.Value;
                DateTime selectedStartTime = startInputTime.SelectedDate.Value;

                DateTime eventStart = new DateTime(selectedStartDate.Year, selectedStartDate.Month, selectedStartDate.Day,
                    selectedStartTime.Hour, selectedStartTime.Minute, selectedStartTime.Second);

                RadDatePicker endInputDate = (RadDatePicker)e.Container.FindControl("rdpEndInsert");
                RadTimePicker endInputTime = (RadTimePicker)e.Container.FindControl("rtpEndInsert");

                DateTime selectedEndDate = endInputDate.SelectedDate.Value;
                DateTime selectedEndTime = endInputTime.SelectedDate.Value;

                DateTime eventEnd = new DateTime(selectedEndDate.Year, selectedEndDate.Month, selectedEndDate.Day,
                    selectedEndTime.Hour, selectedEndTime.Minute, selectedEndTime.Second);

Thanks,

Michael

[Peter]

Hi Michael,

I tested the case with the code your provided, but I did not observe any of the problems you describe. Here is a video capture of my test: http://screencast.com/t/MWQ0NmFh

If you continue to experience problems, I suggest you open a support ticket and send us a sipmle working project for testing.

The Advanced Templates demo would be handy if you want to have recurrence and resource functionality in the advanced form. For simpler cases, you dont need to use the advanced templates from this demo.


All the best,
Peter
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Michael Dunbar]

Hi Peter,

That's strange as I am not trying to do anything clever with the control. Could you post up your sample page please just so I can ensure I am not doing anything silly.

Thanks,

Michael

[Peter]

 
Sure. Attached is the test page I used for this case.


Peter
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Michael Dunbar]

Thanks Peter. Yeah, it works for me on a stand alone page too but not in my user control within my application for some reason. I'm going to have to work backwards on this one and find out what is causing the issue.

Thanks for the help.

[Peter]

We will be happy to look closer into this case, but we will need a working sample. If you decide to send us one, please use the support ticketing system.


Peter
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Michael Dunbar]

I've figured it out. Thought worth posting here in case anyone else has the same issue.

In my project I use a quite common open source third party tool called CSS Friendly Adapters. It basically converts the rendered output of ASP.net controls to the HTML that they should be really (i.e. tables to lists etc).

The time picker is rendered as a ASP.net DataList control and the CSS Friendly Adapter tries to convert this from a table (I assume) into a list. This breaks your time picker control. You need to comment out the DataList Adapter in the browser file that the CSS Friendly Adapter generates.

So, now that is sorted one final question. How do you make the calendar and time selector pop up appear without using the buttons (like in the demo where you click in the input box and the popups automatically appear?

Thanks,

Michael

[Peter]

The ShowPopupOnFocus property will bring you joy:

<telerik:RadDatePicker runat="server" ShowPopupOnFocus="true"  ID="rdpStartInsert" SelectedDate='<%# Bind("Start") %>'
              Skin="Vista" />
          <telerik:RadTimePicker runat="server" ShowPopupOnFocus="true" ID="rtpStartInsert" Width="65px" Skin="Vista"
              SelectedDate='<%# Bind("Start") %>'>

Peter
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.