issue of align header and cell when using Scrolling

[Anders]

use version:2011.1.329.35


see picture attached, the header and item cell are not align.
if I remove the setting scrolling, it works fine.

and this issue occurs only in Chrome, not in IE,Firefox, Safari,Opera, ect..

here's my code :

           <telerik:RadGrid ID="RadGrid1"  EnableViewState="false"   EnableLinqExpressions="False"  Skin="Office2007" 
             runat="server"  Height="100%"
             Width="100%"   AutoGenerateColumns="false"   >
          <MasterTableView Caption=""    NoMasterRecordsText=""   >
            </MasterTableView>
            <ClientSettings   >
            <ClientEvents   />
           <Scrolling AllowScroll="true" UseStaticHeaders="true" />
              <Selecting AllowRowSelect="True" />
            </ClientSettings> 
    <ItemStyle Height="18px" />
  
        </telerik:RadGrid>

any one can tell me how to fix? thanks

[Pavlina]

Hi Anders,

In your case you should pay attention to the following:

1. The RadGrid MasterTableView's TableLayout should be set to Fixed.
2. All column widths should be set by using HeaderStyle-Width only. No ItemStyle-Width.

If you need further assistance, please provide a sample page, which demonstrates your scenario.

Greetings,
Pavlina
the Telerik team

[Anders]

Hi support, thanks for your reply .

no luck ,still has align problem in Chrome.

 web page code:

<form id="form1" runat="server">
     <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

    </telerik:RadScriptManager>
    <telerik:RadGrid ID="RadGrid1"  EnableViewState="false"   EnableLinqExpressions="False"  Skin="Office2007"
             runat="server"  Height="200px"
                AutoGenerateColumns="false"  >
          <MasterTableView Caption=""    NoMasterRecordsText=""   TableLayout="Fixed" >
            </MasterTableView>
            <ClientSettings   >

           <Scrolling AllowScroll="true" UseStaticHeaders="true" />
              <Selecting AllowRowSelect="True" />
            </ClientSettings>
    <ItemStyle Height="18px" />

        </telerik:RadGrid>

     <br />


    </form>

and server side code here:

public partial class WebForm1 : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               BindTestGrid();
           }
       }
       private void BindTestGrid()
       {
           List<CustomerData2> list = new List<CustomerData2>();
           for (int i = 0; i < 2; i++)
           {
               list.Add(new CustomerData2()
               {
                   Datafield_1 = "1",
                   Datafield_2 = "FORSVARSBYGG",
                   Datafield_3 = "S-1124.04790",
                   Datafield_4 = "OMFORMERSTASJON Z, HOaaa",
                   Datafield_5 = "YIT-210-1101",
                   Datafield_6 = "Servicetekniker Elektro"
               }
             );
           }
           RadGrid1.Columns.Clear();
           GridBoundColumn boundColumn;
           for (int i = 1; i < 7; i++)
           {
               boundColumn = new GridBoundColumn();
               string columnName = "Datafield_" + i.ToString();
               RadGrid1.MasterTableView.Columns.Add(boundColumn);
               boundColumn.DataField = columnName;
               boundColumn.UniqueName = columnName;
               boundColumn.HeaderText = columnName;
               //boundColumn.HeaderStyle.Wrap = true;
               //boundColumn.ItemStyle.Wrap = true;
               boundColumn.HeaderStyle.Width = new Unit("60");
               //boundColumn.DataFormatString = "<nobr>{0}</nobr>";
           }
           this.RadGrid1.DataSource = list;
           this.RadGrid1.DataBind();

           foreach (GridColumn column in RadGrid1.Columns)//need disable some columns
           {
               if (column.UniqueName == "Datafield_2" || column.UniqueName == "Datafield_7")
                   column.Visible = false;
           }
           //this.RadGrid1.Rebind();
       }
   }

   public class CustomerData2
   {
       public string Datafield_1 { get; set; }
       public string Datafield_2 { get; set; }
       public string Datafield_3 { get; set; }
       public string Datafield_4 { get; set; }
       public string Datafield_5 { get; set; }
       public string Datafield_6 { get; set; }
   }

[Pavlina]

Hello Anders,

To resolve the alignment issue in Chrome you can use the code snippet below:
ASPX:

<ClientEvents OnGridCreated="GridCreated" />

JS:

<script type="text/javascript">
         function GridCreated(sender, args) {
             var grid = $find("<%= RadGrid1.ClientID %>")
             grid.repaint();
             setTimeout(function () { grid.repaint(); }, 0);
         }
     </script>

Give it a try and let me know if it works as expected.

All the best,
Pavlina
the Telerik team

[Anders]

Hi Pavlina , it works now, Thank you! 

[Erick]

Any similar suggestion for Kendo-ui?