GridDateTimeColumn Filtering In IE7 Will Hide the Filter Icon After Filtering

9 posts, 0 answers
  1. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 10 Apr 2012 Link to this post

    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.





  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Apr 2012 Link to this post

    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
    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. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    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" />
  5. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    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.
  6. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    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.
  7. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    Wait a sec... you guys released a new version 2 days ago. I am still using the previous version.
  8. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    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"/>
  9. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    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...
  10. Merritt
    Merritt avatar
    28 posts
    Member since:
    Mar 2011

    Posted 13 Apr 2012 Link to this post

    This bug is not recreatable in release version 2012.1.411.35
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017