GridDateTimeColumn Filtering In IE7 Will Hide the Filter Icon After Filtering

[Merritt]

After being unable to resolve this issue with my own code, I tried running the demo site in IE7. To my surprise, it has the same issue.

Steps to Recreate

1. Go to: http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx
2. Filter by shipped date: enter a date or use the date picker, click on the associated filter icon
3. View the results...

It appears as if the filter icon is behind the date picker icon.

[Pavlina]

Hi Merritt,

I tried to replicate the described problem with GridDateTimeColumn Filtering in IE7 testing our online example, but to no avail. However, I suggest that you try setting FilterControlWidth property inside the date column and see if it helps.

Here is an example:

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

Greetings,
Pavlina
the Telerik team

[Merritt]

I cannot recreate the problem using the demo on your site at the moment either. Unfortunately, that makes showing you an example of my problem a bit more difficult.

However, I have already used FilterControlWidth and I suspect that might actually be part of the problem: the text box part of the RadDatePicker used for filtering changes size after a postback. Initially it's the specified size,  but upon postback it seems to grow to a 'default' size (it expands and in effect goes over top of the filter icon).

<telerik:GridDateTimeColumn UniqueName="CreateDate" DataFormatString="{0:d}" ItemStyle-Width="110" FilterControlWidth="100" HeaderText="Created" DataField="CreateDateOnly" SortExpression="CreateDateAndTime" />

[Merritt]

I have attached images of how my column appears before and after the selection of a filter value. It seems that once a value has been entered into that text box and then a postback is made, that is where the trouble starts.

I have now introduced a GridSettingsPersister which makes this an even larger issue because the user can't properly remove the date filter by refreshing the page (I now store the previous filter settings for the page). Below is the grid in its entirety: 

<telerik:RadGrid runat="server" ID="RadGrid1" OnInit="RadGrid1_Init" AutoGenerateColumns="false" AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource" EnableLinqExpressions="true" AllowSorting="true" AllowFilteringByColumn="true" AllowAutomaticDeletes="false">
        <MasterTableView DataKeyNames="Id" InsertItemPageIndexAction="ShowItemOnCurrentPage" EditMode="EditForms" >
            <Columns>
                <telerik:GridBoundColumn DataField="SapOrderNumber" HeaderText="SAP Order #" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridBoundColumn DataField="Organization" HeaderText="Organization" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridBoundColumn DataField="Email"  FilterControlWidth="150" HeaderText="Email" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridBoundColumn DataField="ProductTypeDescription" HeaderText="Product Type" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
                <telerik:GridNumericColumn DataField="NumberOfProductKeys" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="50" FilterControlWidth="40" AutoPostBackOnFilter="true" HeaderText="Keys" DataFormatString="" CurrentFilterFunction="EqualTo" ShowFilterIcon="false" />
                <telerik:GridDateTimeColumn UniqueName="CreateDate" DataFormatString="{0:d}" FilterControlWidth="100px" HeaderText="Created" DataField="CreateDateOnly" SortExpression="CreateDateAndTime">
                    <HeaderStyle Width="130px" />
                </telerik:GridDateTimeColumn>
                <telerik:GridBoundColumn DataField="CreatedBy" HeaderText="Creator" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
            </Columns>
        </MasterTableView>
        <PagerStyle Mode="NextPrevAndNumeric" />
    </telerik:RadGrid>

In desperation I am now looking into recreating the look and feel of your default date time column using a template column.

[Merritt]

Also I notice in ie7 the filter controls sometimes shift vertically and will appear to be floating somewhere inappropriate but when mouse-over'ed they teleport back to where they should be.

[Merritt]

Wait a sec... you guys released a new version 2 days ago. I am still using the previous version.

[Merritt]

So upon postback (async or reg), when there is a value in the text input for the date filter,  you lose the proper sizing of the text. Here is the pertinant controls before the postback:

<span class="riDisplay" id="ctl00_CPH1_RadGrid1_ctl00_ctl02_ctl02_RDIPFCreateDate_dateInput_display" style="width: 82px; text-align: left; color: #000; line-height: normal; padding-right: 5px; padding-left: 5px; font-family: "segoe ui",arial,sans-serif; font-size: 12px; border-right-width: 3px; border-left-width: 1px; display: inline;" _events="[object Object]"/>

<input name="ctl00$CPH1$RadGrid1$ctl00$ctl02$ctl02$RDIPFCreateDate$dateInput" class="riTextBox riEnabled" id="ctl00_CPH1_RadGrid1_ctl00_ctl02_ctl02_RDIPFCreateDate_dateInput" style="width: 82px; height: 15px; color: transparent; line-height: 10000px;" onkeydown="if((event.keyCode == 13 || event.keyCode == 20)){event.returnValue=false;return false;}" type="text" alt="Filter CreateDate column" _events="[object Object]" control="[object Object]"/>

Notice that 82px ? Well, that's based off of this setting:

<telerik:GridDateTimeColumn FilterControlWidth="120px" DataField="CreateDateOnly" HeaderText="Created" SortExpression="CreateDateAndTime" UniqueName="CreateDate" PickerType="DatePicker" DataFormatString="{0:D}">
                    <HeaderStyle Width="160px" />
</telerik:GridDateTimeColumn>

Here's how they look  after i do a postback (as described above):

<span class="riDisplay" id="ctl00_CPH1_RadGrid1_ctl00_ctl02_ctl02_RDIPFCreateDate_dateInput_display" style="display: none;"/>

<input name="ctl00$CPH1$RadGrid1$ctl00$ctl02$ctl02$RDIPFCreateDate$dateInput" class="riTextBox riEnabled" id="ctl00_CPH1_RadGrid1_ctl00_ctl02_ctl02_RDIPFCreateDate_dateInput" onkeydown="if((event.keyCode == 13 || event.keyCode == 20)){event.returnValue=false;return false;}" type="text" alt="Filter CreateDate column" value="2012-04-12-00-00-00"/>

[Merritt]

And, just like Kaiser Soze, 82px is gone. Vanished, into the wrinkles of time. I am going to look into using javascript to try to re-add these values during the postback...

[Merritt]

This bug is not recreatable in release version 2012.1.411.35