[Solved] GridNumericColumn in ie8 compatability mode

[spiketherat]

Hi

I'm having problems with a rad grid which has a lot of columns including numeric columns. The grid is set up to scroll horizontally but the filter boxes for the numeric columns don't scroll with the grid. I've included some images of the grid and the set up of my columns below:

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" Height="97%" runat="server"
   AutoGenerateColumns="False" AllowFilteringByColumn="True" AllowSorting="True" CellSpacing="0"
   ShowGroupPanel="True" OnNeedDataSource="RadGrid1_NeedDataSource" AllowMultiRowSelection="True"
   AllowPaging="True" PagerStyle-AlwaysVisible="true" PageSize="50"OnItemCreated="RadGrid1_ItemCreated">
   <ClientSettings>
     <Selecting AllowRowSelect="True" />
     <Scrolling AllowScroll="True" UseStaticHeaders="True" />
   </ClientSettings>
   <MasterTableView CommandItemDisplay="Top">
     <CommandItemSettings ShowAddNewRecordButton="False" />
     <Columns>
       <telerik:GridBoundColumn DataField="Code" HeaderStyle-Width="75px" FilterControlAltText="Filter Code column"
         HeaderText="Code" SortExpression="Code" UniqueName="Code">
       </telerik:GridBoundColumn>
       <telerik:GridCheckBoxColumn DataField="Item" HeaderStyle-Width="75px" DataType="System.Boolean" FilterControlAltText="Filter Item column"
         HeaderText="Item" SortExpression="Item" UniqueName="Item">
       </telerik:GridCheckBoxColumn>
        <telerik:GridTemplateColumn DataField="Title" HeaderStyle-Width="200px"
         HeaderText="Title" Groupable="false" SortExpression="Title" UniqueName="Title">
         <ItemTemplate><asp:label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>'></asp:label>
         </ItemTemplate>
       </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn DataField="StringProp1" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp1 column"
         HeaderText="StringProp1" SortExpression="StringProp1" UniqueName="StringProp1">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp2" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp2 column"
         HeaderText="StringProp2" SortExpression="StringProp2" UniqueName="StringProp2">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp3" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp3 column"
         HeaderText="StringProp3" SortExpression="StringProp3" UniqueName="StringProp3">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp4" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp4 column"
         HeaderText="StringProp4" SortExpression="StringProp4" UniqueName="StringProp4">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp5" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp5 column"
         HeaderText="StringProp5" SortExpression="StringProp5" UniqueName="StringProp5">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp6" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp6 column"
         HeaderText="StringProp6" SortExpression="StringProp6" UniqueName="StringProp6">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp7" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp7 column"
         HeaderText="StringProp7" SortExpression="StringProp7" UniqueName="StringProp7">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp8" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp8 column"
         HeaderText="StringProp8" SortExpression="StringProp8" UniqueName="StringProp8">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="StringProp9" HeaderStyle-Width="75px" FilterControlAltText="Filter StringProp9 column"
         HeaderText="StringProp9" SortExpression="StringProp9" UniqueName="StringProp9">
       </telerik:GridBoundColumn>
       <telerik:GridNumericColumn DataField="DoubleProp1" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp1 column"
         HeaderText="DoubleProp1" SortExpression="DoubleProp1" UniqueName="DoubleProp1">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp2" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp2 column"
         HeaderText="DoubleProp2" SortExpression="DoubleProp2" UniqueName="DoubleProp2">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp3" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp3 column"
         HeaderText="DoubleProp3" SortExpression="DoubleProp3" UniqueName="DoubleProp3">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp4" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp4 column"
         HeaderText="DoubleProp4" SortExpression="DoubleProp4" UniqueName="DoubleProp4">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp5" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp5 column"
         HeaderText="DoubleProp5" SortExpression="DoubleProp5" UniqueName="DoubleProp5">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp6" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp6 column"
         HeaderText="DoubleProp6" SortExpression="DoubleProp6" UniqueName="DoubleProp6">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp7" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp7 column"
         HeaderText="DoubleProp7" SortExpression="DoubleProp7" UniqueName="DoubleProp7">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp8" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp8 column"
         HeaderText="DoubleProp8" SortExpression="DoubleProp8" UniqueName="DoubleProp8">
       </telerik:GridNumericColumn>
       <telerik:GridNumericColumn DataField="DoubleProp9" HeaderStyle-Width="75px" DataType="System.Double" FilterControlAltText="Filter DoubleProp9 column"
         HeaderText="DoubleProp9" SortExpression="DoubleProp9" UniqueName="DoubleProp9">
       </telerik:GridNumericColumn>
     </Columns>
   </MasterTableView>
 </telerik:RadGrid >

It also seems to occur with the GridDateTimeColumn as well.

I hope someone can help out.
Regards
Liz

[Galin]

Hello Elizabeth,

The RadTextBox has position: relative by default and this triggers the well known position: relative bug in IE6/7. To fix it, you need to add position: relative to any scrollable container in which RadTextBoxis located, e.g.

.rgDataDiv
{
    position: relative;
}

I hope this helps.


All the best,
Galin
the Telerik team

[spiketherat]

Galin,

Thank you very much for your response, very helpful.

In my case I was having problems with items in the filter as well as the body so had to add it against the .rgHeaderDiv element as well.
And thanks for the link it's been a while since I've done web work and it's explained a few other 'quirks' I'd been experiencing.

Cheers
Liz