This is a migrated thread and some comments may be shown as answers.

Datepicker width rendering issue in Safari and Chrome filter

2 Answers 49 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 2
Dan asked on 11 Aug 2012, 08:33 PM
I have a grid with a date column.  Here is the code:

<telerik:RadGrid ID="grdEvaluations" runat="server"                 
                AllowAutomaticDeletes="True" Width="790px" 
                AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" 
                AutoGenerateColumns="False" AutoGenerateDeleteColumn="True" 
                AutoGenerateEditColumn="True" CellSpacing="0" DataSourceID="sqlEvaluations" 
                GridLines="None" PageSize="20"><MasterTableView DataKeyNames="EvaluationsKey" DataSourceID="sqlEvaluations" CommandItemDisplay="Top"><CommandItemSettings ExportToPdfText="Export to PDF" /><RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" 
                        Visible="True"><HeaderStyle Width="20px" /></RowIndicatorColumn><ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" 
                        Visible="True"><HeaderStyle Width="20px" /></ExpandCollapseColumn><Columns>
                            <telerik:GridBoundColumn DataField="EvaluationsKey" DataType="System.Int32"  
                            Display="False" FilterControlAltText="Filter EvaluationsKey column" 
                            HeaderText="EvaluationsKey" ReadOnly="True" SortExpression="EvaluationsKey" 
                            UniqueName="EvaluationsKey" AllowFiltering="False"></telerik:GridBoundColumn><telerik:GridDropDownColumn DataField="OfficialID" DataSourceID="sqlOfficials" 
                            FilterControlAltText="Filter OfficialDDL column" HeaderText="Official" 
                            ListTextField="Comment" ListValueField="username" UniqueName="OfficialID" 
                            FilterControlToolTip="Filter by OfficialID" 
                            FilterImageToolTip="Filter by OfficialID"></telerik:GridDropDownColumn>
                            <telerik:GridDateTimeColumn DataField="EvalDate" DataFormatString="{0:d}" 
                            FilterControlAltText="Filter EvalDate column" HeaderText="Eval Date" 
                            UniqueName="EvalDate">
                                <HeaderStyle Width="150px" />
                                <ItemStyle Width="150px" />
                            </telerik:GridDateTimeColumn><telerik:GridDropDownColumn DataField="EvaluatorID" DataSourceID="sqlOfficials" 
                            FilterControlAltText="Filter Evaluator column" 
                            FilterControlToolTip="Filter by OfficialID" 
                            FilterImageToolTip="Filter by OfficialID" HeaderText="Evaluator" 
                            ListTextField="Comment" ListValueField="username" UniqueName="EvaluatorID"></telerik:GridDropDownColumn><telerik:GridTemplateColumn AllowFiltering="False" DataField="FilePath" 
                            FilterControlAltText="Filter FilePath column" HeaderText="Evaluation Sheet" 
                            UniqueName="FilePath"><EditItemTemplate><asp:HyperLink ID="hylFilePath" runat="server" NavigateUrl='<%# "~/FileUploads/Evals/" & Eval("FilePath") %>'></asp:HyperLink></EditItemTemplate><InsertItemTemplate>* Max File Size is 200 Kb <telerik:RadAsyncUpload  OnFileUploaded="uplFilePathInsert_OnFileUploaded" ID="uplFilePathInsert" runat="server" MaxFileInputsCount="1" TargetFolder="~/FileUploads/Evals/" MaxFileSize="204800" ToolTip="File size must be less than 200 Kb"></telerik:RadAsyncUpload></InsertItemTemplate><ItemTemplate><asp:HyperLink ID="hylFilePath" runat="server" NavigateUrl='<%# "~/FileUploads/Evals/" & Eval("FilePath") %>'></asp:HyperLink><asp:Label ID="lblFilePath" runat="server" Text='<%# Eval("FilePath") %>' Visible="false"></asp:Label></ItemTemplate></telerik:GridTemplateColumn><telerik:GridBoundColumn AllowFiltering="False" DataField="Comment" 
                            FilterControlAltText="Filter Comment column" HeaderText="Comment" 
                            SortExpression="Comment" UniqueName="Comment"></telerik:GridBoundColumn></Columns><EditFormSettings><EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn></EditFormSettings></MasterTableView><FilterMenu EnableImageSprites="False"></FilterMenu></telerik:RadGrid>

The grid renders properly and everything looks great in IE and FireFox.  However in Safari and Chrome the column width for the Eval Date column is HUGE.  If I set AllowFilter="False" for the EvalDate column the grid looks good in Safari and Chrome again.

Is there a work-around for this and is this a known bug?

Thanks,

Dan

2 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 15 Aug 2012, 12:21 PM
Hello Dan,

This is a known issue in WebKit browsers. A possible solution is to use the FilterControlWidth property of the GridDateTimeColumn to define the width dimension of the filter control. Note that you have to set the width in pixels, not in percentage.

All the best,
Kostadin
the Telerik team
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 their blog feed now.
0
Dan
Top achievements
Rank 2
answered on 16 Aug 2012, 02:33 AM
Thanks; I'll make that change.
Tags
Calendar
Asked by
Dan
Top achievements
Rank 2
Answers by
Kostadin
Telerik team
Dan
Top achievements
Rank 2
Share this question
or