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

frozen column, horizontal scroll bug

7 Answers 146 Views

Grid

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

7 Answers, 1 is accepted

answered on 13 Jan 2010, 02:05 PM

scrolling-with-frozen-columns.zip

Hi Ibrahim,

Unfortunately I was not able to replicate the issue you are facing in the live site. Please find attached a simple working project which is working as expected. Examine it and let me know what is the difference in your case.

I hope this helps.

All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 13 Jan 2010, 03:13 PM

hello

thanks for your fast response.
I tried your project and added more and more features of our page and finally figured out what causes the behaviour.
if the header height is changing during scrolling because of different lengths in header texts the scroll bar jumps back.

if you change the header text of the fifth column to some short text it works again.
If you scroll one column to the right so the fifth column which causes the height of the header to expand is not visible any more it works as expected.

i created some dummy data for that purpose so you don't need the DB anymore.
replace the design and codebehind with the following text blocks to test it:

    
            <%@ Page Language="C#" AutoEventWireup="true" Culture="pt-BR" CodeFile="Default.aspx.cs" 
        
                Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadGrid ID="dgAuditRecs_rad" runat="server" Width="100 %" AllowPaging="false"  style="overflow:hidden"  
        
                    AutoGenerateColumns="false" GridLines="Both"  AllowMultiRowEdit="true"  Skin="Outlook" > 
        
                    <MasterTableView TableLayout="Fixed" DataKeyNames="CustomerID"  CommandItemDisplay="Bottom"  EditMode="InPlace" > 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton" 
        
                                DataField="CustomerID" UniqueName="CustomerID" HeaderStyle-Width="200px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton" 
        
                                DataField="ContactName" UniqueName="ContactName" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                                     <Telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" HeaderText="Bearbeiten">  
        
                                        <ItemStyle HorizontalAlign="Center" BackColor="LightGrey"/> 
        
                                        <HeaderStyle Width=100 HorizontalAlign="Center"/>     
        
                                     </Telerik:GridEditCommandColumn> 
        
                                      <Telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" Text="Löschen" HeaderText="Löschen"  UniqueName="DeleteColumn"> 
        
                                        <HeaderStyle Width=40 />     
        
                                        <ItemStyle HorizontalAlign="Center" BackColor="LightGrey" /> 
        
                                     </Telerik:GridButtonColumn> 
        
                             <Telerik:GridTemplateColumn HeaderText="Herunterladen dummytext to force high header" UniqueName="Download"> 
        
                                        <ItemTemplate> 
        
                                            <asp:Label runat=server ID=lbl_Download Text="Download" Font-Underline=true></asp:Label> 
        
                                        </ItemTemplate> 
        
                                         <HeaderStyle Width=100 HorizontalAlign="Center" />     
        
                                        <ItemStyle HorizontalAlign="Center" /> 
        
                                     </Telerik:GridTemplateColumn> 
        
                                    <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton" 
        
                                DataField="CompanyName" UniqueName="CompanyName" HeaderStyle-Width="250px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="Address" HeaderText="Address" HeaderButtonType="TextButton" 
        
                                DataField="Address" UniqueName="Address" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="PostalCode" HeaderText="PostalCode" HeaderButtonType="TextButton" 
        
                                DataField="PostalCode" UniqueName="PostalCode" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="CustomerIDa" HeaderText="CustomerIDa" HeaderButtonType="TextButton" 
        
                                DataField="CustomerIDa" UniqueName="CustomerIDa" HeaderStyle-Width="200px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="ContactNamea" HeaderText="Contact Namea" HeaderButtonType="TextButton" 
        
                                DataField="ContactNamea" UniqueName="ContactNamea" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="CompanyNamea" HeaderText="Companya" HeaderButtonType="TextButton" 
        
                                DataField="CompanyNamea" UniqueName="CompanyNamea" HeaderStyle-Width="250px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="Addressa" HeaderText="Addressa" HeaderButtonType="TextButton" 
        
                                DataField="Addressa" UniqueName="Addressa" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="PostalCodea" HeaderText="PostalCodea" HeaderButtonType="TextButton" 
        
                                DataField="PostalCodea" UniqueName="PostalCodea" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                             <telerik:GridBoundColumn SortExpression="CustomerIDb" HeaderText="CustomerIDb" HeaderButtonType="TextButton" 
        
                                DataField="CustomerIDb" UniqueName="CustomerIDb" HeaderStyle-Width="200px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="ContactNameb" HeaderText="Contact Nameb" HeaderButtonType="TextButton" 
        
                                DataField="ContactNameb" UniqueName="ContactNameb" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="CompanyNameb" HeaderText="Companyb" HeaderButtonType="TextButton" 
        
                                DataField="CompanyNameb" UniqueName="CompanyNameb" HeaderStyle-Width="250px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="Addressb" HeaderText="Addressb" HeaderButtonType="TextButton" 
        
                                DataField="Addressb" UniqueName="Addressb" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="PostalCodeb" HeaderText="PostalCodeb" HeaderButtonType="TextButton" 
        
                                DataField="PostalCodeb" UniqueName="PostalCodeb" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                             <telerik:GridBoundColumn SortExpression="CustomerIDc" HeaderText="CustomerIDc" HeaderButtonType="TextButton" 
        
                                DataField="CustomerIDc" UniqueName="CustomerIDc" HeaderStyle-Width="200px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="ContactNamec" HeaderText="Contact Namec" HeaderButtonType="TextButton" 
        
                                DataField="ContactNamec" UniqueName="ContactNamec" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="CompanyNamec" HeaderText="Companyc" HeaderButtonType="TextButton" 
        
                                DataField="CompanyNamec" UniqueName="CompanyNamec" HeaderStyle-Width="250px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="Addressc" HeaderText="Addressc" HeaderButtonType="TextButton" 
        
                                DataField="Addressc" UniqueName="Addressc" HeaderStyle-Width="150px"> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn SortExpression="PostalCodec" HeaderText="PostalCodec" HeaderButtonType="TextButton" 
        
                                DataField="PostalCodec" UniqueName="PostalCodec" HeaderStyle-Width="550px"> 
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <EditItemStyle CssClass="SelectedItem" /> 
        
                    <ClientSettings  EnableRowHoverStyle=true> 
        
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="4" /> 
        
                        <Resizing AllowColumnResize=false /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web; 
        
            using System.Web.Security; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            using System.Data.OleDb; 
        
            using Telerik.Web.UI; 
        
            public partial class _Default : System.Web.UI.Page 
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    dgAuditRecs_rad.DataSource = GetDataSource(); 
        
                } 
        
                private DataSet GetDataSource() 
        
                { 
        
                    DataSet dstemp = new DataSet(); 
        
                    dstemp.Tables.Add(); 
        
                    dstemp.Tables[0].Columns.Add("CustomerID", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("ContactName", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CompanyName", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("Address", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("PostalCode", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CustomerIDa", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("ContactNamea", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CompanyNamea", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("Addressa", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("PostalCodea", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CustomerIDb", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("ContactNameb", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CompanyNameb", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("Addressb", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("PostalCodeb", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CustomerIDc", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("ContactNamec", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("CompanyNamec", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("Addressc", typeof(string)); 
        
                    dstemp.Tables[0].Columns.Add("PostalCodec", typeof(string)); 
        
                    for (int i = 0; i < 10; i++) 
        
                    { 
        
                        DataRow row = dstemp.Tables[0].NewRow(); 
        
                        row["CustomerID"] = i.ToString(); 
        
                        row["ContactName"] = "Mr. Smith " + i.ToString(); 
        
                        row["CompanyName"] = "Z Cooperation" + i.ToString(); 
        
                        row["Address"] = "Fake Street " + i.ToString(); 
        
                        row["PostalCode"] = i.ToString(); 
        
                        row["CustomerIDa"] = (i*3).ToString(); 
        
                        row["ContactNamea"] = "Mr. Smith " + (i * 3).ToString(); 
        
                        row["CompanyNamea"] = "Z Cooperation" + (i * 3).ToString(); 
        
                        row["Addressa"] = "Fake Street " + (i * 3).ToString(); 
        
                        row["PostalCodea"] = (i * 3).ToString(); 
        
                        row["CustomerIDb"] = (i * 7).ToString(); 
        
                        row["ContactNameb"] = "Mr. Smith " + (i * 7).ToString(); 
        
                        row["CompanyNameb"] = "Z Cooperation" + (i * 7).ToString(); 
        
                        row["Addressb"] = "Fake Street " + (i * 7).ToString(); 
        
                        row["PostalCodeb"] = (i * 7).ToString(); 
        
                        row["CustomerIDc"] = (i * 11).ToString(); 
        
                        row["ContactNamec"] = "Mr. Smith " + (i * 11).ToString(); 
        
                        row["CompanyNamec"] = "Z Cooperation" + (i * 11).ToString(); 
        
                        row["Addressc"] = "Fake Street " + (i * 11).ToString(); 
        
                        row["PostalCodec"] = (i * 11).ToString(); 
        
                        dstemp.Tables[0].Rows.Add(row); 
        
                    } 
        
                    return dstemp; 
        
                } 
        
            }

regards

answered on 27 Jan 2010, 07:58 PM

To add Ibrahim's issue, we are having the same issue.

I have opened a ticket (Aug 2008) and submitted a test project that shows the issue, we've upgraded our suite several times since Aug. 2008 and still the problem persists.

Grid is simple, 15 columns first 2 are frozen the other 13 columns are the months (Jan-Dec) plus a Totals column.

We can partially see the December column and cannot see the Totals column, we've tested it in IE6, 7, 8 and Firefox. IE6 if we resize the browser then the columns appear. IE8 and Firefox if we resize the browser the issue becomes unpredictable (more columns become unaccessible then if we resize more columns become visible. Unpredictable)

Right now my solution is going to be to seperate into 2 grids, 1 grid containing the frozen columns and the other grid containing the scrollable columns. We've done this several times in the past and was hoping that this had been fixed but we are having the problem in a new grid that we just created.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

frozen column, horizontal scroll bug

7 Answers, 1 is accepted