frozen column, horizontal scroll bug in UI for ASP.NET AJAX Grid

Ibrahim Imam

69 posts

Member since:
Jul 2007

Posted 13 Jan 2010 Link to this post

hello

i know there are a lot of issues for frozen columns and horizontal scrolling when the number of frozen columns is high and takes a lot of space in the grid. i also use the workaround of increasing the last column with in order to be able to scroll to last column.
the bug i am facing is if i don't scoll using the arrows of the scroll bar but click directly in the scroll bar to scroll some columns it always jumps back to the beginning.
if i already scrolled to the middle position and then click it works.

is there a workaround or fix or this issue?

regards

Pavlina

Admin

6187 posts

Posted 13 Jan 2010 Link to this post

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.

scrolling-with-frozen-columns.zip

Ibrahim Imam

69 posts

Member since:
Jul 2007

Posted 13 Jan 2010 Link to this post

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

Ibrahim Imam

69 posts

Member since:
Jul 2007

Posted 14 Jan 2010 Link to this post

i implemented a workaround by clipping the header text if it is too long.

two issues i found while working on this problem:
-) if not all columns have the same width and you scroll with fixed columns there are some vertical gridlines wrongly arranged
-) i have a javascript to react on resize of the grid. if i resize during scrolling (meaning the scroll bar is somehwere in the middle and not on the left side) i can not scroll to all columns anymore.

regards

Pavlina

Admin

6187 posts

Posted 18 Jan 2010 Link to this post

Hello Ibrahim,

Could you please open a formal support ticket and send us a sample project illustrating the issues you are facing? Thus I could do all my best to find a quick resolution for you.

Additionally, I suggest you review the following help articles:
Scroll with static headers
Frozen Columns

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.

Alex

77 posts

Member since:
Mar 2008

Posted 27 Jan 2010 Link to this post

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.

Pavlina

Admin

6187 posts

Posted 28 Jan 2010 Link to this post

Hello Alex,

In order to display all columns when using frozen columns you should increase the Header Style Width of the last column in RadGrid. Thus you should be able to navigate to the leftmost column as expected to see the information in it.
Additionally, please note that you should consider the number of frozen columns with the width of the last column in the RadGrid control.

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.

رامي

1 posts

Member since:
Sep 2017

Posted 08 Sep 2017 Link to this post

نجران