Datepicker width rendering issue in Safari and Chrome filter

3 posts, 0 answers
  1. Dan
    Dan avatar
    8 posts
    Member since:
    Jul 2011

    Posted 11 Aug 2012 Link to this post

    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. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 15 Aug 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    8 posts
    Member since:
    Jul 2011

    Posted 15 Aug 2012 Link to this post

    Thanks; I'll make that change.
Back to Top