Telerik RadControl Grid: Scroll bug in IE & Chrome

[Mattias]

Hello,

Im using the Grid control from Telerik's RadControls. The grid is populated with thousands of records and lists 50 records per page. I have some filtering options appearing above and the solution is in ASP.NET 3.5 with NHibernate 2.1.

Everything works fine and dandy except for when i select one of the bottom rows and some weird onfocus-event occurrs. When a search/listing has been occurred and the focus is on, lets say the search button. I then select one of the bottom rows between record 40-50, and the browser immediately scrolls down an inch or two. But when the focus is on one of the rows within the grid table, i no longer have these strange scrollings. But if i just switch the focus on anything outside the grid, the scrolling bug appears again.

This appears in IE and Chrome, but not Firefox. I guess its some onfocus event that fires when putting the radgrid in focus, but i cant find any solution on how to fix it.

Please help me, its very annoying!

Best regards, Mattias

[Dimo]

Hi Mattias,

Do you have a RadFormDecorator on the page, which decorates checkboxes and you have a ClientSelectColumn in the RadGrid? If yes, then add this CSS rule to your page:

.rgDataDiv
{
        position: relative; 
}


If your scenario is different, we will need a runnable demo to check what exactly is going on.


Sincerely yours,
Dimo
the Telerik team

[Mattias]

I found that the following is causing the automatic scroll-down:

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

From the following script file found in Googles developer tool:

Telerik.Web.UI.RadGrid._click

@

:12345/ScriptResource.axd?d=9moUWP6PXFJlI4mkAFvFhSeaO2xhWaeLKJEMnwgScun5G2ohbY-zb5_uuAe7egKKDZhpieTgh6AkELfIRuQxs7BtHQKpFNDglo9hvXHXTKpG3gAFLKg2VW1nJJ0sqRgpuz1-iA2&t=470597b0:4675

},_click:function(b){if(!this._canRiseRowEvent(b)){return;

}if(!!this.ClientSettings.AllowKeyboardNavigation){if(this.get_element().focus){this.get_element().focus();

So if i turn off AllowKeyboardNavigation, the scrolling stops. I do however want it enabled and automatic scoll, but only when the actual row focus occurrs by keyboard navigation - not when row focus changes due to mouse click.

[Dimo]

Hello Mattias,

Focusing the RadGrid control is a must in order to support keyboard nagivation and the focusing causes the scroll offset to change. The only possible workaround in your case is to focus the RadGrid manually in the control's GridCreated client event.

http://www.telerik.com/help/aspnet-ajax/grid_ongridcreated.html

sender.get_element().focus();

Greetings,
Dimo
the Telerik team

[Mattias]

So its not the focus of the radgrid row that is the problem, but the general behaviour of the browser when an element gets focused that is the problem here? I still want the row get focus as it does now with both mouse and keyboard, but avoid the scrolling effect that occurrs when a switch of focus appears via the mouse.

[Dimo]

Hello Mattias,

>> So its not the focus of the radgrid row that is the problem, but the general behaviour of the browser when an element gets focused that is the problem here?

Yes.

Regards,
Dimo
the Telerik team

[Darius]

So, what is the FocusKey property for? I had the following code, which worked fine until recently. The users would press Ctrl+Y, the grid would focus, and then they could use the keyboard.

RadGrid1.ClientSettings.AllowKeyboardNavigation = True
RadGrid1.ClientSettings.KeyboardNavigationSettings.FocusKey = GridFocusKeys.Y

In the recent version, the grid seems to automatically gain focus, causing the page to scroll up. How can this be fixed? It's important to keep the keyboard navigation for ADA/accessibility reasons.

[Radoslav]

Hello Mattias,

The FocusKey property specify the key combination that focuses the grid. The first key is preset to [CTRL] by design. Also when you focus the RadGrid and perform postback by design after it the focus is set to the RadGrid. This behaviour could not been avoided, otherwise after postback you need to explicitly set focus to the RadGrid in order to perform any keyboard navigation.

Kind regards,
Radoslav
the Telerik team

[Darius]

There is something that changed in the recent version. The grid focuses when a page is loaded, and if it's tall enough, it will cause a page to scroll up. You can see that it happens here: http://ousd.legistar.com/People.aspx but not here: http://ousd.legistar.com/Legislation.aspx

This is a recent change and I need to know how to work around this.

[Radoslav]

Hi Mattias,

I tried to reproduce the described issue but to no avail. I am sending you a simple example. Please check it out and let me know what differs in your case.

Greetings,
Radoslav
the Telerik team

[Darius]

Thank you Radoslav. Through a lot of trial and error I was able to narrow down the scenario for this very elusive bug. The following conditions have to be met:

1. This started with version 3.1215, which is part of the reason why your sample works, as it is using version 3.1109.
2. You have to have a grid with more than a page of records.
3. The following properties have to be set in this exact order. Moving the AllowKeyboardNavigation property to the bottom seems to fix this.

So, it seems that this is related to AllowKeyboardNavigation and PageSize and the order in which they are set.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
        If Page.IsPostBack = False Then
 
            RadGrid1.ClientSettings.AllowKeyboardNavigation = True '-- when this line is moved down, everything will work fine
            RadGrid1.AllowPaging = True
            RadGrid1.PageSize = 100
 
        End If
 
    End Sub
 
    Protected Sub RadGrid1_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
 
        Dim table As New DataTable()
        table.Columns.Add("ID")
        table.Columns.Add("Item")
        table.Columns.Add("Date", GetType(DateTime))
        For i As Integer = 1 To 200
            table.Rows.Add(i, "Item" & i.ToString(), DateTime.Now.AddDays(i))
        Next
        RadGrid1.DataSource = table
 
    End Sub

[Radoslav]

Hello Darius,

I confirm that the described issue exists in the current version of RadControls. When the RadGrid1.ClientSettings.AllowKeyboardNavigation property is set to true and paging is enabled into the code behind the RadGrid gets the focus when the page is loaded. Our developers are aware and they will start working on the resolution of this issue.

Kind regards,
Radoslav
the Telerik team

[Mattias]

Can i track this issue in PITS?

/Mattias

[Pavel]

Hello Mattias,

This issue is fixed in our latest service pack. Please try it out and let us know if you find any problems.

Regards,
Pavel
the Telerik team

[Prashanth]

Hi,

  I recently upgraded my telerik rad controls . My project  was running successfully in Ie7,Ie 8, But not in Ie9, Ie10 and chrome.Buttons and drop down list are not working. Please Let me know How to make work in Chorme and New versions of Ie10. I am using the latest rad controls Q3 2012.

Thanks in Advance,
Prashanth.

[Radoslav]

Hi Prashanth,

Could you please post you aspx page markup code with the related code behind file or send us a small runnable example where the described problems could be reproduced. Thus we will be able to gather more details about your scenario debug the application and investigate the problem.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Prashanth]

Hi Radoslav,

All my functionality is working buttons and every thing but i am getting design issues in IE10 and Chrome. In remaining all browsers its working fine. 
Can you please let me know what is the issue.

Thanks,
Prashanth.

 

[Radoslav]

Hello Prashanth,

Could you please elaborate a bit more on your scenario?  What are the exact issues which you facing at your end? Additionally please not that without having your code or runnable example it is hard to say what the reasons for unwanted behavior at your end. At a meantime could you please try removing all "<meta>" tags from the page’s <head> element and let me know if the issues still persist.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Prashanth]

Thanks. Got fixed