Page jumps to the top when opening the FilterMenu by clicking on Filter button in RadGrid

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 27 Jan 2020 13:56 by ADMIN

Release R3 2019

Toshen

Created on: 25 Jun 2019 12:21

Category: Grid

Type: Bug Report

Page jumps to the top when opening the FilterMenu by clicking on Filter button in RadGrid

We use the Telerik RadGrid for our application and we have found that if we click on the filter button on the RadGrid, it will make the page scroll.

2 comments

ADMIN

Rumen

Posted on: 14 Aug 2019 12:36

Hi,

We just released the Latest Internal Build 2019.2.814 of the suite with a fix for this issue and wanted to notify you about that.

You can check the release notes at https://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp-net-ajax-2019-2-814-(nightly-build-2019-08-14) as well as download the Telerik_UI_for_ASP.NET_AJAX_2019_2_814_Dev_hotfix.zip installation from https://www.telerik.com/account/product-download?product=RCAJAX.

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

ADMIN

Attila Antal

Posted on: 27 Jun 2019 14:27

Thank you for taking the time report this issue.

This behavior is caused by two logic not being in Sync with each other. One of which is the ContextMenu Screen Boundary Detection conflicting with and internal logic of the Grid related to Accessibility.

We have found a way to work around the issue.

Wire up the ClientLoad and ClientShown events of the Grid's FilterMenu:

<telerik:RadGrid ID="RadGrid1" runat="server">

<FilterMenu OnClientLoad="OnClientLoad" OnClientShown="OnClientShown"></FilterMenu>

</telerik:RadGrid>

Use the following JavaScript code in those handlers. This will work around the Grid's internal logic that Focuses the item to early and instead, does it after the Expand Animation is over.

<script type="text/javascript">

//Put your JavaScript code here.

function OnClientShown(sender, args) {

var firstItem = sender.get_focusedItem() || sender.get_items().getItem(0);

if (firstItem._linkElement) {

firstItem.__linkElement = firstItem._linkElement;

firstItem._linkElement = undefined;

}

else if (firstItem._templateElement) {

firstItem.__templateElement = firstItem._templateElement;

firstItem._templateElement = undefined;

}

function OnClientLoad(sender, args) {

Telerik.Web.UI.RadContextMenu.prototype._onExpandAnimationEnded = function () {

var sender = this;

var animationDuration = sender.get_expandAnimation().get_duration();

var firstItem = sender.get_focusedItem() || sender.get_items().getItem(0);

setTimeout(function () {

if (firstItem.__linkElement) {

firstItem._linkElement = firstItem.__linkElement;

firstItem._linkElement.focus();

}

else if (firstItem.__templateElement) {

firstItem._templateElement = firstItem.__templateElement;

firstItem._templateElement.focus();

}

}, animationDuration);

}

</script>