This is a migrated thread and some comments may be shown as answers.

Having issue with horizontal grid scrolling in IE 7

9 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ruchi
Top achievements
Rank 1
Ruchi asked on 01 Jun 2012, 09:58 AM
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

9 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 01 Jun 2012, 11:17 AM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 01 Jun 2012, 11:18 AM
Hello,

Please check attached image.

Thanks,
Jayesh Goyani
0
Ruchi
Top achievements
Rank 1
answered on 01 Jun 2012, 12:24 PM
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.
0
Pavlina
Telerik team
answered on 01 Jun 2012, 03:02 PM
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
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.
0
Ruchi
Top achievements
Rank 1
answered on 01 Jun 2012, 04:04 PM
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>"));
               }
           }
       }
0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Jun 2012, 11:52 AM
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
0
Ruchi
Top achievements
Rank 1
answered on 04 Jun 2012, 06:48 AM
Hi All,

Still having issue in IE 7 with horizontal bar

Thanks,
Ruchi Jani
0
Ruchi
Top achievements
Rank 1
answered on 05 Jun 2012, 08:54 AM
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
0
Accepted
Pavlina
Telerik team
answered on 06 Jun 2012, 08:03 AM
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
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.
Tags
Grid
Asked by
Ruchi
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Ruchi
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or