GridDateTimeColumn in RadGrid is 4px in editmode (IE8)

[Rick]

Hi folks,

I've got a RadGrid with a GridDateTimeColumn. In edit mode the textbox is only 4px wide. This is only happens for the first time I edit a row after the page is loaded! When I click Cancel to exit edit mode and then edit again, the width is 120px. I've got this issue in IE8. Works fine in Firefox. Have tested with different skins, all give the same result. Also see attached screenshot.

Below is the .aspx code. The column that shows the issue is "betaaldatum". Als interesting is that the ItemStyle width of 60px is completely ignored.

 

<telerik:RadGrid ID="gridTermijnen" runat="server" Width="610px" OnItemDataBound="gridTermijnen_ItemDataBound"
                                    AllowSorting="True" CellSpacing="0" GridLines="None" OnNeedDataSource="gridTermijnen_NeedDataSource" OnInsertCommand="gridTermijnen_InsertCommand"
                                    OnDeleteCommand="gridTermijnen_DeleteCommand" OnUpdateCommand="gridTermijnen_UpdateCommand" OnItemCommand="gridTermijnen_ItemCommand" OnDataBound="gridTermijnen_DataBound" LocalizationPath="~/creditmanagement/Telerik_localization">
                                <ClientSettings EnableRowHoverStyle="true" >
                                    <Selecting AllowRowSelect="true" />
                                    <ClientEvents OnRowDblClick="RowDblClick" />
                                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="120" />
                                </ClientSettings>
                                <MasterTableView DataKeyNames="nr" AllowSorting="true" ShowFooter="true" NoMasterRecordsText=" Geen termijnen gevonden" AutoGenerateColumns="false"
                                    CommandItemDisplay="Top" EditMode="InPlace">
                                    <Columns>
                                        <telerik:GridTemplateColumn UniqueName="RowNumber" HeaderText="Nr.">
                                            <ItemTemplate>
                                                <asp:Label ID="numberLabel" runat="server" Width="30px" />
                                            </ItemTemplate>
                                            <HeaderStyle Width="30px" />
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridDateTimeColumn DataField="betaaldatum" SortExpression="Betaaldatum" UniqueName="Betaaldatum" HeaderText="Betaaldatum" DataFormatString="{0:d/M/yyyy}" FilterControlWidth="100px" HeaderStyle-Width="140px" AllowFiltering="true">
                                            <ItemStyle Width="60px" />
                                        </telerik:GridDateTimeColumn>
                                        <telerik:GridNumericColumn DataField="termijnbedrag" UniqueName="Termijnbedrag" HeaderText="Termijnbedrag" NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="Totaal: {0:C}" />
                                        <telerik:GridTemplateColumn DataField="nagekomendatum" UniqueName="Nagekomendatum" HeaderText="Datum nagekomen">
                                            <ItemTemplate>
                                                <asp:Label ID="nagekomendatumLabel" runat="server" Text='<%# Eval("nagekomendatum", "{0:d/M/yyyy}") %>' Width="100%" />
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridEditCommandColumn UniqueName="EditColumn" CancelText="Annuleren" UpdateText="Wijzigen" InsertText="Toevoegen" EditText="Bewerken"><HeaderStyle Width="120px" /></telerik:GridEditCommandColumn>
                                        <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" ButtonType="LinkButton" Text="Verwijderen" ConfirmText="Weet u zeker dat u de geselecteerde termijn wilt verwijderen?" />
                                    </Columns>
                                    <CommandItemSettings AddNewRecordText="Toevoegen nieuwe termijn" ShowRefreshButton="false" />
                                    <SortExpressions>
                                        <telerik:GridSortExpression FieldName="betaaldatum" SortOrder="Ascending" />
                                    </SortExpressions>
                                </MasterTableView>
                            </telerik:RadGrid>

The html source code that is generated for IE first edit, IE second edit and Firefox edits:

IE, 1st edit - 4px column!
<input name="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" class="riTextBox riEnabled" id="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" style="width: 4px;" type="text" _events="[object Object]" value="25-10-2012"/>

IE, 2nd edit - fine, though it seems hardcoded to 120px which is not a setting I applied anywhere:
<input name="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" class="riTextBox riEnabled" id="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" style="width: 120px;" type="text" _events="[object Object]" value="25-10-2012"/>

Firefox - always fine.
<input maxlength="2147483647" value="25-10-2012" id="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" name="gridTermijnen_ctl00_ctl05_RDIPBetaaldatum_dateInput_text" class="riTextBox riEnabled" style="width:100%;" type="text">

I've no idea where this 4px comes from. Also because it's hardcoded in the html I can't use CSS to override it.

Any suggestions are much appreciated!

Rick