Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 02 Oct 2019 14:32 by ADMIN
Felix
Created on: 18 Jan 2019 08:24
Category: Grid
Type: Bug Report
3
RadGrid HeaderContextMenu out of screen boundary

Hi

Since updating to the latest release of UI for ASP.NET AJAY the RadContextMenu of my RadGrid is misaligned at the right edge of the screen. Even in your sample https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx when you open the context menu at the right side of the screen the context menu is nor aligned to the left (like it used to be).

Please ses the attached printscreen.

Kind regards
Felix

Attached Files:
8 comments
ADMIN
Peter Milchev
Posted on: 08 Mar 2019 10:19
Hello,

I have good news that boundary detection of the ContextMenu is further improved and available for testing in the Latest Internal Build version 2019.1.308, we just released.

You can download the LIB from https://www.telerik.com/account/product-download?product=RCAJAX -> click on the Internal Builds tab -> download Telerik_UI_for_ASP.NET_AJAX_2019_1_308_Dev_hotfix.zip or Telerik_UI_for_ASP.NET_AJAX_2019_1_308_Trial_hotfix.zip depending on your license.

Here are the Release Notes.

The fix will be also a part of the upcoming in May major R2 2019 release.

Regards,
Peter Milchev
Progress Telerik
 
ADMIN
Peter Milchev
Posted on: 06 Mar 2019 07:54
Here is a workaround for the Service Pack version that improves the boundary detection in some edge cases.

Telerik.Web.UI.RadContextMenu.prototype._onExpandAnimationStarted = function (sender) {
    var $ = $ || $telerik.$;
    // Make sure EDGE shows contextmenu at correct position when scrolled.
    if (sender.get_element().style.left !== this._cacheLeft) {
        var cacheLeftInt = parseInt(this._cacheLeft);
        var outerWidthInt = $(sender.get_element()).outerWidth();
  
        if (cacheLeftInt + outerWidthInt > $telerik.getViewPortSize().width) {
            sender.get_element().style.left = (cacheLeftInt - (cacheLeftInt + outerWidthInt - $telerik.getViewPortSize().width)) + "px";
        } else {
            sender.get_element().style.left = this._cacheLeft;
        }
    }
  
    if (sender.get_element().style.top !== this._cacheTop) {
        var cacheTopInt = parseInt(this._cacheTop);
        var outerHeightInt = $(sender.get_element()).outerHeight();
        var topBufferHeight = 7;
  
        if (cacheTopInt + outerHeightInt > $telerik.getViewPortSize().height) {
            // make top always visible in viewport
            var newTop = cacheTopInt - (cacheTopInt + outerHeightInt - $telerik.getViewPortSize().height);
            if (newTop < topBufferHeight) {
                newTop = topBufferHeight;
            }
  
            sender.get_element().style.top = newTop + "px";
        } else {
            sender.get_element().style.top = this._cacheTop;
        }
    }
}


Regards,
Peter Milchev
Progress Telerik
ADMIN
Peter Milchev
Posted on: 11 Feb 2019 12:51
Hello guys,

I have good news that the RadGrid HeaderContextMenu out of screen boundary issue is fixed and you can test it in the fresh LIB (Latest Internal Build) upload - Telerik_UI_for_ASP.NET_AJAX_2019_1_211_Dev_hotfix.zip. You can download it from https://www.telerik.com/account/product-download?product=RCAJAX and give it a spin. Here are also the Release notes for this nightly build - UI for ASP.NET AJAX 2019.1.211 (Nightly Build 2019/02/11)

Please check if the LIB version fixes the issue on your side and if there any side effects we would be grateful if you share them with us. The hotfix will be part of the upcoming R1 2019 SP1 release due on Feb 20, 2019 (next week) and we want to ensure it will be stable and is tested in more complex real-life cases.

Regards,
Peter Milchev
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: 05 Feb 2019 21:24
Hi Roland, 

This code is only overriding an internal method that is responsible for the ContextMenu and it can be placed on the page with the ContextMenu. No additional action is required. You could even save it in a Script file and import it on the pages where there is a ContextMenu to avoid the trouble.

Once the fix is released and you have updated the assemblies, this will no longer be needed and can be safely removed.

Roland Klug
Posted on: 05 Feb 2019 21:03

Hi Attila,

thank you. Unfortunately I don't find the right location for pasting your code snippet. Are there any dependencies or javascript imports I have to consider?

Best regards,

Roland

ADMIN
Attila Antal
Posted on: 04 Feb 2019 10:39
Hi Roland,

Our developer team has been working on this issue, and it is confirmed that a fix will be delivered in a Service Pack by the mid-end of February. Until then, please use the workaround shared in this article.

Kind regards,
Attila Antal
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.
Roland Klug
Posted on: 01 Feb 2019 14:22
We also face this issue. Please provide a hotfix for this soon!
ADMIN
Attila Antal
Posted on: 18 Jan 2019 13:20
This problem also affects how the Menu is positioned vertically.

Viable Workaround would be to override one internal method. Place the below JavaScript code on the page where the issue appears:

Telerik.Web.UI.RadContextMenu.prototype._onExpandAnimationEnded = function (sender) {
    if (sender.get_element().style.left !== this._cacheLeft) {
        if (parseInt(this._cacheLeft) + $(sender.get_element()).outerWidth() > $telerik.getViewPortSize().width) {
            sender.get_element().style.left = ($telerik.getViewPortSize().width - $(sender.get_element()).outerWidth()) + "px";
        } else {
            sender.get_element().style.left = this._cacheLeft;
        }
    }
 
    if (sender.get_element().style.top !== this._cacheTop) {
        if (parseInt(this._cacheTop) + $(sender.get_element()).outerHeight() > $telerik.getViewPortSize().height) {
            sender.get_element().style.top = "7px";
        } else {
            sender.get_element().style.top = this._cacheTop;
        }
    }
}
Create an account Log In
View
Type
Status
Category