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

[Solved] Horizontal Scroll Bar move a jerk in RadGrid

1 Answer 196 Views

Grid

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

Himanshu asked on 29 Sep 2009, 01:43 PM

Hello Everybody,

I am facing some strange issues with radgrid with below settings.

Issues:

#1. FrozenColumn does not work with IE 6

#2. In firefox + IE8 Horizontal Scroll bar moves with a jerk

#3. Horizontal scroll bar is not smooth.

I have created a datatable at runtime to bind RadGrid.

Any help regarding this will be deeply appreciated.

Radgrid Settings:

-- RadcodeBlock Starts

function GridCreated(sender, args)

{

var scrollArea = sender.GridDataDiv;

var dataHeight = sender.get_masterTableView().get_element().clientHeight;

scrollArea.style.height = dataHeight + 17 + "px";

}

--RadcodeBlock Ends

<telerik:RadGrid ID="rdgrdMarkBookView" runat="server" OnNeedDataSource="rdgrdMarkBookView_NeedSource" CssClass="flat" PagerStyle-AlwaysVisible="true"

AutoGenerateColumns="true" AllowPaging="true" ExportSettings-IgnorePaging="true"

AllowSorting="true" GridLines="None" Font-Size="9px" ItemStyle-Font-Size="9px" Width="970px" PageSize="50"

ShowGroupPanel="false">

<MasterTableView AllowMultiColumnSorting="True" EnableHeaderContextMenu="true"

AllowPaging="true" ItemStyle-Font-Size="9px" AlternatingItemStyle-Font-Size="9px"

TableLayout="Auto" >

</MasterTableView>

<ClientSettings AllowDragToGroup="True" AllowRowsDragDrop="true" AllowColumnsReorder="true"

ReorderColumnsOnClient="true" >

</ClientSettings>

</ExportSettings>

</telerik:RadGrid>

Thanks

Himanshu

1 Answer, 1 is accepted

answered on 01 Oct 2009, 07:59 AM

Hello Himanshu,

The frozen scroll functionality works in IE6 as well. Please check for Javascript errors on the page. As for the jerky scrolling - this is by design - the columns are actually not scrolled, but hidden and shown.

Here is a sample page, which works as expected in all browsers:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <script runat="server"> 
        
            protected void rdgrdMarkBookView_NeedSource(object sender, GridNeedDataSourceEventArgs e) 
        
            { 
        
                DataTable dt = new DataTable(); 
        
                DataRow dr; 
        
                int colsNum = 20; 
        
                int rowsNum = 5; 
        
                string colName = "Column"; 
        
                for (int j = 1; j <= colsNum; j++) 
        
                { 
        
                    dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        
                } 
        
                for (int i = 1; i <= rowsNum; i++) 
        
                { 
        
                    dr = dt.NewRow(); 
        
                    for (int k = 1; k <= colsNum; k++) 
        
                    { 
        
                        dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                    } 
        
                    dt.Rows.Add(dr); 
        
                } 
        
                (sender as RadGrid).DataSource = dt; 
        
            } 
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <script type="text/javascript"> 
        
            function GridCreated(sender, args) 
        
            { 
        
                var scrollArea = sender.GridDataDiv; 
        
                var dataHeight = sender.get_masterTableView().get_element().clientHeight; 
        
                scrollArea.style.height = dataHeight + 17 + "px"; 
        
            }  
        
            </script> 
        
            <telerik:RadGrid ID="rdgrdMarkBookView" runat="server" OnNeedDataSource="rdgrdMarkBookView_NeedSource" 
        
                AllowPaging="true" AllowSorting="true" Font-Size="9px" Width="970px" PageSize="50"> 
        
                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle> 
        
                <MasterTableView AllowMultiColumnSorting="True" EnableHeaderContextMenu="true" /> 
        
                <HeaderStyle Width="100px" /> 
        
                <ClientSettings AllowDragToGroup="True" AllowRowsDragDrop="true" AllowColumnsReorder="true" 
        
                    ReorderColumnsOnClient="true"> 
        
                    <Selecting AllowRowSelect="True"></Selecting> 
        
                    <Scrolling AllowScroll="true" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="1" /> 
        
                    <ClientEvents OnGridCreated="GridCreated" /> 
        
                </ClientSettings> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Greetings,
Dimo
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.