Rad Timepicker design issue

[Hiren]

Hello ,

I am using the timepicker control as filter control in RadGridview and i have issue with design while opening the timepicker from the filter control.

It is issue while timepicker do not have space on their left side and also while we re-size browser and even have space on right side.

Please see the screen shot attached with my application.(MyApplication.png)

Same issue raise in telerik demo side also , i have also attached the screen shot (TelerikDemoIssue.png)

Demo Link : http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

Please let me know your feedback for the same.

Thanks,
Hiren

[Venelin]

Hi Hiren,

The observed behavior occurs because the TimeView does not have fixed width and the widths of the divs that hold the shadow images are calculated once the time picker is rendered.

You can easily prevent this behavior by simply setting a fixed width for the TimeView as shown below.

ASPX:

<telerik:RadTimePicker runat="server" ID="rtp1">
    <TimeView runat="server" Width="300px">
    </TimeView>
</telerik:RadTimePicker>

I hope this helps.

Regards,
Venelin
Telerik

[hiren]

Hello venelin,

Thanks for your quick reply.

But i have issue like if is use the Filtertemplate than i need to change my exisiting system code also because this changes is not only the design changes i need to make my filter work also.

See below image compare with old timepicker column and new timepicker column



 <telerik:GridDateTimeColumn DataField="AppTime1" HeaderText="Appt. Time" SortExpression="AppTime1"
                                                                        FilterListOptions="VaryByDataType" Resizable="true" AutoPostBackOnFilter="false"
                                                                        DataFormatString="{0:hh:mm tt}" PickerType="TimePicker" ShowSortIcon="true" FilterControlWidth="75%"
                                                                        DataType="System.DateTime">
                                                                    </telerik:GridDateTimeColumn>
                                                                    <telerik:GridDateTimeColumn DataField="PickUpTime" HeaderText="Pickup Time" SortExpression="PickUpTime"
                                                                        FilterControlWidth="100%" FilterListOptions="VaryByDataType" Resizable="true"
                                                                        PickerType="TimePicker" AutoPostBackOnFilter="false" DataType="System.DateTime"
                                                                        DataFormatString="{0:hh:mm tt}" ShowSortIcon="true">
                                                                        <FilterTemplate>
                                                                            <telerik:RadTimePicker runat="server" ID="rtp1">
                                                                                <TimeView ID="TimeView1" runat="server" Width="300px">
                                                                                </TimeView>
                                                                            </telerik:RadTimePicker>
                                                                        </FilterTemplate>
                                                                    </telerik:GridDateTimeColumn>

Please provide me solution that it only change in my design not in the code part.

Thanks,
Hiren

[Venelin]

Hello Hiren,

As far as I understand your concern you want to keep your old markup which was:

ASPX:

<telerik:GridDateTimeColumn DataField="AppTime1" HeaderText="Appt. Time" SortExpression="AppTime1"
    FilterListOptions="VaryByDataType" Resizable="true" AutoPostBackOnFilter="false"
    DataFormatString="{0:hh:mm tt}" PickerType="TimePicker" ShowSortIcon="true" FilterControlWidth="75%"
    DataType="System.DateTime">
</telerik:GridDateTimeColumn>

because if you use filter template you are unable to see the filter button and in the same time fix the visual issue mentioned before.

To fix the issue without changing the markup please add this CSS rule to your page styles:

.RadCalendarTimeView {
    width: 300px;
}

In this manner you'll apply a fixed width to the time view and it won't resize with the window anymore.

Regards,
Venelin
Telerik