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

issue of align header and cell when using Scrolling

5 Answers 166 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anders
Top achievements
Rank 1
Anders asked on 08 Apr 2011, 09:06 AM
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

5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 08 Apr 2011, 09:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Anders
Top achievements
Rank 1
answered on 11 Apr 2011, 11:17 AM
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; }
   }
0
Accepted
Pavlina
Telerik team
answered on 11 Apr 2011, 03:04 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Anders
Top achievements
Rank 1
answered on 12 Apr 2011, 07:34 AM
Hi Pavlina , it works now, Thank you

0
Erick
Top achievements
Rank 1
answered on 18 Apr 2017, 03:14 PM
Any similar suggestion for Kendo-ui?
Tags
Grid
Asked by
Anders
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Anders
Top achievements
Rank 1
Erick
Top achievements
Rank 1
Share this question
or