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

Differences in SaveScrollPosition and AllowKeyBoardNavigation Between IE8 and Chrome

3 Answers 92 Views

Grid

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

loowool asked on 02 Oct 2009, 11:29 AM

Dear telerik,

We notice some differences when we enable SaveScrollPosition and AllowKeyBoardNavigation between IE8 and Chrome (RadGrid Version Q12009).

We were able to isolate the problem in a single grid defined as follows in a default.aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ 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"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form runat="server" id="mainForm" method="post" style="width: 100%;">  
        
                <telerik:RadScriptManager ID="RadScriptManager" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadCodeBlock ID="codeBlock" runat="server">  
        
                    <script type="text/javascript">  
        
                        function GridCreated(sender, args) {  
        
                            var row = sender.get_masterTableView().get_selectedItems()[0];  
        
                            if (row) sender.set_activeRow(row.get_element())  
        
                            sender.Control.focus();  
        
                        }  
        
                        function GridRowSelected(sender, args) {  
        
                            if (sender.get_masterTableView().get_selectedItems().length == 1) {  
        
                                var oldBehaviour = Telerik.Web.UI.Grid.ScrollIntoView;  
        
                                Telerik.Web.UI.Grid.ScrollIntoView = function() { };  
        
                                sender.set_activeRow($get(args.get_id()));  
        
                                Telerik.Web.UI.Grid.ScrollIntoView = oldBehaviour;  
        
                            }  
        
                        }  
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">  
        
                </telerik:RadAjaxManager>   
        
                <telerik:RadGrid ID="RadGrid1" 
        
                    DataSourceID="SqlDataSource1" 
        
                    AllowAutomaticDeletes="false" 
        
                    AllowAutomaticInserts="false" 
        
                    AllowAutomaticUpdates="false" 
        
                    AutoGenerateColumns="false" 
        
                    EnableViewState="true" 
        
                    AllowMultiRowSelection="true" 
        
                    ShowGroupPanel="true" 
        
                    AllowFilteringByColumn="true" 
        
                    AllowPaging="true" 
        
                    PageSize="50" 
        
                    Skin="Office2007" 
        
                    runat="server">  
        
                    <PagerStyle Mode="NextPrev" /> 
        
                    <GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" /> 
        
                    <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" AllowGroupExpandCollapse="true" AllowKeyboardNavigation="true">  
        
                        <ClientEvents OnGridCreated="GridCreated" OnRowSelected="GridRowSelected" /> 
        
                        <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" /> 
        
                        <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                        <Scrolling AllowScroll="true" SaveScrollPosition="true" ScrollHeight="300px" UseStaticHeaders="true" /> 
        
                    </ClientSettings> 
        
                    <MasterTableView   
        
                        AllowSorting="true" 
        
                        EnableColumnsViewState="false" 
        
                        GroupLoadMode="Server" 
        
                        CommandItemDisplay="None" 
        
                        DataSourceID="SqlDataSource1"   
        
                        DataKeyNames="uid" 
        
                        ClientDataKeyNames="uid">  
        
                        <Columns> 
        
                            <telerik:GridBoundColumn DataField="uid" HeaderText="uid" UniqueName="uid" 
        
                                SortExpression="uid" ReadOnly="True">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" UniqueName="CompanyName" 
        
                                SortExpression="CompanyName">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Country" HeaderText="Country" UniqueName="Country" 
        
                                SortExpression="Country">  
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                </telerik:RadGrid> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        
                    ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\Nwind.mdb;Persist Security Info=True" 
        
                    SelectCommand="SELECT TOP 1000 CustomerID AS uid, CompanyName, Country FROM Customers order by CustomerID;"   
        
                    ProviderName="System.Data.OleDb">  
        
                </asp:SqlDataSource> 
        
                <br /> 
        
                <asp:Button ID="Button1" Text="Post Back" runat="server" /> 
        
                </form> 
        
            </body> 
        
            </html>

1) Open the above page in IE 8
2) Start scrolling using the keyboard down arrow.
It works fine till the active row reaches the last visible line in the grid (in this case Customer ID=CACTU)
3) Press the down arrow again, the active row changes, but the grid does not scroll. I.e. the active row remains hidden (Why?)
4) Press the down arrow 5 more times till you active the Customer=DUMON (you have to manually move the vertical scroll bar to view the active row)
5) Make sure the active row is not the last visible row
6) Press the Post Back button, the grid will reposition itself exactly where it was, i.e. the SaveScrollPosition works under IE (Correct).

Now, lets repeat the same under Chrome (latest version)

1) Open the above page in Google Chrome
2) Start scrolling using the keyboard down arrow.
It works fine till the active row reaches the last visible line in the grid (in this case Customer ID=CACTU)
3) Press the down arrow again, the active row changes, and the grid scrolls fine making the active row visible (Correct)
4) Press the down arrow 5 more times till you active the Customer=DUMON
5) Make sure the active row is not the last visible row (by moving the vertical scroll bar)
6) Press the Post Back button, the grid will reposition itself but without respecting the scroll postion placing the last active row CustomerID=DUMON as the last visible row, i.e. the SaveScrollPosition does not work under Chrome (Why?).

Please help us solve this bug.

Regards
Salah A. Malaeb
TeknoBuild

3 Answers, 1 is accepted

answered on 07 Oct 2009, 07:50 AM

videochrome.zip

videoie8.zip

Hello Salah,

I tested the scenario with the markup you have provided with the latest official version of our controls but could not observe any of the problems you describe. Please find attached two videos illustrating the behavior on my end. Take a look at them and let me know if I am missing something important.

Sincerely yours,
Pavel
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.

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

Differences in SaveScrollPosition and AllowKeyBoardNavigation Between IE8 and Chrome

3 Answers, 1 is accepted