Having issue with horizontal grid scrolling in IE 7

[Ruchi]

Hi All,

I am facing one issue related to telerik grid for IE 7. I have provided horizontal scroll to telerik gridview by below property 

<ClientSettings>
   <Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>

Its working fine with IE 8 , FF and chrome but not working with IE 7. The layout gets distorted in IE 7 and its only for rad date picker in filter. Kindly find attached screen for the same.

Please help me.

Thanks,
Ruchi Jani

[Jayesh Goyani]

Hello Ruchi,

I am not able to reproduce the issue
My telerik version Q2 2012.

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
           OnNeedDataSource="RadGrid1_NeedDataSource"
           AutoGenerateColumns="false" AllowMultiRowEdit="false"
           AllowFilteringByColumn="true">
           <PagerStyle Mode="NextPrevAndNumeric" />
           <MasterTableView Name="Parent" CommandItemDisplay="Top">
               <Columns>

                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID1">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name1">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID2">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name2">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID3">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name4">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID5">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name5">
                   </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="customdate" UniqueName="customdate" HeaderText="customdate">
                   </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="customdate" UniqueName="cust1omdate" HeaderText="customdate">
                   </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="customdate" UniqueName="custo2mdate" HeaderText="customdate">
                   </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="customdate" UniqueName="cust3omdate" HeaderText="customdate">
                   </telerik:GridDateTimeColumn>
                    <telerik:GridDateTimeColumn DataField="customdate" UniqueName="custo4mdate" HeaderText="customdate">
                   </telerik:GridDateTimeColumn>
                   <telerik:GridEditCommandColumn>
                   </telerik:GridEditCommandColumn>
               </Columns>
           </MasterTableView>
           <ClientSettings>
               <Scrolling AllowScroll="true" UseStaticHeaders="true" />
           </ClientSettings>
       </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DateTime dt = DateTime.Now;

        dynamic data = new[] {
                new { ID = 1, Name ="Name_1", customdate=dt,NO = 11.00,CustomerId="ALFKI",Stock=20,IsSysAdmin = true},
                new { ID = 2, Name = "Name2", customdate=dt,NO = 11.00,CustomerId="ALFKI2",Stock=30,IsSysAdmin = false},
                new { ID = 3, Name = "Name3", customdate=dt,NO = 11.00,CustomerId="ALFKI1",Stock=20,IsSysAdmin = true},
                new { ID = 4, Name = "Name4", customdate=dt,NO = 11.44,CustomerId="ALFKI",Stock=40,IsSysAdmin = true},
                new { ID = 55555, Name = "Name5", customdate=dt,NO = 10.4,CustomerId="ALFKI",Stock=20,IsSysAdmin = true}
            };

           RadGrid1.DataSource = data;
    }

Note : If you still get the issue then try to set FiltercontrolWidth="100px".
else provide your code.

Let me know if any concern.

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

Please check attached image.

Thanks,
Jayesh Goyani

[Ruchi]

Hi Jayesh,

Thanks for the reply.

I am having issue only with IE 7 and older version of IE and by seeing your image its seems like you have tested with IE 8.

[Pavlina]

Hello Ruchi,

In order to overcome this IE7 browser behavior you should set <nobr> tag around the filter cells. Please examine the attached project which is working as expected and let me know if other questions or problems arise.

Kind regards,
Pavlina
the Telerik team

[Ruchi]

Hi Pavlina,

Thanks for the reply.

I tried below code but its not working. I am still getting same issue with Horizontal bar in IE 7. The project you have provided to me have vertical bar not horizontal bar.

if (e.Item is GridFilteringItem)
       {
           foreach (TableCell cell in e.Item.Cells)
           {
               if (cell.Controls.Count > 0)
               {
                   cell.Controls.AddAt(0, new LiteralControl("<nobr>"));
                   cell.Controls.Add(new LiteralControl("</nobr>"));
               }
           }
       }

[Jayesh Goyani]

Hello Ruchi Jani,

IE6 and IE7 apply column widths differently, compared to other browsers - they also add the cell padding to the set width, so the columns actually become wider than specified. This is why a horizontal scroll bar occurs in IE7.

Please check below code snippet.

<telerik:GridDateTimeColumn DataField="customdate" UniqueName="customdate" HeaderText="customdate"
                     FilterControlWidth="100px">
                     <HeaderStyle Width="100px" />
                     <ItemStyle Width="100px" />
                 </telerik:GridDateTimeColumn>

Note : i also notice one thing is that when i click i mouse hover on datepicker it will automatically come inside in grid.(means it come in to normal UI.)

Let me know if any concern.

Thanks,
Jayesh Goyani

[Ruchi]

Hi All,

Still having issue in IE 7 with horizontal bar

Thanks,
Ruchi Jani

[Ruchi]

Hi Pavlina

 I have modified your source code to provide horizontal bar to reproduce issue and in your project also its not working. I have attached project and screen shot both. You can review the same and share solution with me. Its urgent for me.

Regards,
Ruchi Jani

[Pavlina]

Hello Ruchi Jani,

In order to avoid this IE7 browser behavior you should add the following CSS class:
CSS:

<style type="text/css">
      .rgHeaderDiv
      {
          position: relative;
      }
<style/>

Give it a try and see if it works for you.

Regards,
Pavlina
the Telerik team