Rad Timepicker design issue

4 posts, 1 answers
  1. Hiren
    Hiren avatar
    26 posts
    Member since:
    Feb 2009

    Posted 06 Aug 2013 Link to this post

    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



  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 09 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. hiren
    hiren avatar
    3 posts
    Member since:
    Mar 2011

    Posted 09 Aug 2013 Link to this post

    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
  5. Answer
    Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 14 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top