RadGrid NumericColumn FilterIcon issue in IE7

[Hiren]

I am having this issue since very long that Filter Icon of GridNumericColumn is not displayed Properly.
See Attached Image. It happens only in IE7. Above IE7 it works perfect. And also it happens with GridNumericColumn
Column only. It works with BoundColumn.
I am using following code and css as it suugests in some of telerik forum but it doesn't work.

 

<telerik:GridNumericColumn DataField="abc" HeaderText="abc" UniqueName="abc"
FilterControlWidth="80%" SortExpression="abc" FilterListOptions="VaryByDataType"
Resizable="true" AutoPostBackOnFilter="false" ShowSortIcon="true" DataType="System.Int32">
<ItemStyle Width="7%" />
<HeaderStyle Width="7%" />
</telerik:GridNumericColumn>

<!--[if IE 7]>
<style type="text/css">
.riTextBox,.riFocused,.riEnabled,.riHover
{
height:15px !important;
}
#ctl00_ContentPlaceHolder_grdAppointmentSearch_ctl00_ctl02_ctl03_RNTBF_abc
{
width:50px !important;
max-width:50px !important;
}
</style>
<![endif]-->

[Deyan Enchev]

Hi Hiren,

When using the RadGrid’s basic filtering capabilities you do not need to explicitly add CSS in order to position the filter icons correctly. Could you take a look at our Grid – Basic Filtering online demo? The “Freight” column is of type GridNumericColumn you can check whether you can replicate the reported issue using this demo.

Regards,
Deyan Enchev
Telerik

[Hiren]

Hello ,

here i attached the source code with instruction in the page, which produce the error.


Please update the code and make it work for us.

Thanks,
Hiren

[Deyan Enchev]

Hi,

Attached you can find the modified version of your project as you have requested.

Now a proper CSS is applied so in IE7 there will be no rendering misalignment of the filter icon next to the GridNumericColumn.

Regards,
Deyan Enchev
Telerik

[hiren]

Hello Deyan,

Thanks for your answer.

But it does not work with my solution. we have Skin File in our application. 

i have modified my code and add skin file please check issue still there.

Download Link : Radnumeric_V2.zip

Please let me know your feedback for the same.

Thanks,
Hiren

[Deyan Enchev]

Hi Hiren,

Indeed the suggested approach is not working in case there is a .skin file added to your project. Still we believe that we found a solution to the issue you are experiencing. Could you try setting in your MasterPage.Master file, the CSS property zoom: 1;

* + html .RadInput
       {
           padding-right: 12px; /*equals to padding-left + padding-right + border-left + border-right = 12*/
           zoom: 1;
       }

       * + html .RadInput input
       {
           width: 100% !important;
       }

This CSS rule is the fastest and in most cases the cleanest way to activate the hasLayout property for a HTML element and is used for older versions of IE.

Give this approach a try and let us know how it goes.


Regards,
Deyan Enchev
Telerik