Christian Devita
Top achievements
Rank 1
Rank 1
Christian Devita
asked on 20 Sep 2017, 09:56 PM
Chrome's latest update version 61 has created a bug in the display of the contextmenu of the radtreeview.
The scenario occurs when the treeview is the only element on the page and its content is bigger than the window it is in and the browser's native scrollbars are present. When scrolling down to items past the initial set in the viewport the context menu does not appear next to the node you click instead getting stuck at the bottom of the last node that can be seen without scrolling. In my app I have a treeview in a RadWindow but I found the same behavior with a treeview in a standard webform.
I've tested this in the demo example of contextmenu for treeview. The attached project is the same code as the demo and if you run it, expand all the nodes and make the browser window smaller than the treeview content so scrollbars appear, and right click the bottom nodes you will see the context menu not positioned by the node you clicked.
Any ideas for a workaround?
2 Answers, 1 is accepted
0
Christian Devita
Top achievements
Rank 1
Rank 1
answered on 20 Sep 2017, 10:00 PM
Code:
<%@ Page AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TreeViewTest.Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<script type="text/javascript" src="scripts.js"></script>
<div class="demo-container size-thin">
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" AllowNodeEditing="true" OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick"
OnClientContextMenuItemClicking="onClientContextMenuItemClicking" OnClientContextMenuShowing="onClientContextMenuShowing"
OnNodeEdit="RadTreeView1_NodeEdit">
<ContextMenus>
<telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server"
enderMode="Lightweight">
<Items>
<telerik:RadMenuItem Value="Copy" Text="Copy ..." ImageUrl="~/images/Outlook/10.gif">
</telerik:RadMenuItem>
<telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" ImageUrl="~/images/Outlook/rename.gif"
PostBack="false">
</telerik:RadMenuItem>
<telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/images/Outlook/12.gif">
</telerik:RadMenuItem>
<telerik:RadMenuItem Value="Delete" Text="Delete Folder" ImageUrl="~/images/Outlook/7.gif">
</telerik:RadMenuItem>
<telerik:RadMenuItem IsSeparator="true">
</telerik:RadMenuItem>
<telerik:RadMenuItem Value="MarkAsRead" Text="Mark All as Read">
</telerik:RadMenuItem>
</Items>
<CollapseAnimation Type="none"></CollapseAnimation>
</telerik:RadTreeViewContextMenu>
<telerik:RadTreeViewContextMenu ID="EmptyFolderContextMenu" runat="server">
<Items>
<telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/images/Outlook/12.gif">
</telerik:RadMenuItem>
<telerik:RadMenuItem IsSeparator="true">
</telerik:RadMenuItem>
<telerik:RadMenuItem Value="EmptyFolder" Text="Empty this folder" ImageUrl="~/images/Outlook/2DeletedItems.gif">
</telerik:RadMenuItem>
</Items>
<CollapseAnimation Type="none"></CollapseAnimation>
</telerik:RadTreeViewContextMenu>
</ContextMenus>
<Nodes>
<telerik:RadTreeNode Value="_Private_PersonalFolders" ImageUrl="~/images/Outlook/1PersonalFolders.gif"
AllowEdit="false" Text="Personal Folders" Expanded="true">
<Nodes>
<telerik:RadTreeNode Value="_Private_DeletedItems" ImageUrl="~/images/Outlook/2DeletedItems.gif"
AllowEdit="false" Text="Deleted Items (79)" Font-Bold="true" ContextMenuID="EmptyFolderContextMenu">
<Nodes>
<telerik:RadTreeNode Text="Spam (33)" AllowEdit="true" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Old (46)" AllowEdit="true" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_Drafts" ImageUrl="~/images/Outlook/3Drafts.gif"
AllowEdit="false" Text="Drafts (2)" Font-Bold="true">
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_Inbox" ImageUrl="~/images/Outlook/4Inbox.gif"
AllowEdit="false" Text="Inbox (23)" Font-Bold="true">
<Nodes>
<telerik:RadTreeNode Text="Family (1)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Friends (2)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Partners" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="New Offers (8)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Job candidates (12)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_JunkEmail" AllowEdit="false" Text="Junk Email (34)"
Font-Bold="true" ImageUrl="~/images/Outlook/junk.gif" ContextMenuID="EmptyFolderContextMenu">
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_OutBox" ImageUrl="~/images/Outlook/outbox.gif"
AllowEdit="false" Text="Outbox">
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_PublicFolders" ImageUrl="~/images/Outlook/folder.gif"
AllowEdit="false" Text="Public folders (2)" Font-Bold="true">
<Nodes>
<telerik:RadTreeNode Text="Favorites" ImageUrl="~/images/Outlook/folder.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="All Public Folders (2)" ImageUrl="~/images/Outlook/folder.gif"
Font-Bold="true">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_RssFeeds" AllowEdit="false" Text="RSS Feeds"
ImageUrl="~/images/Outlook/rss.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Value="_Private_SentItems" ImageUrl="~/images/Outlook/sent.gif"
AllowEdit="false" Text="Sent Items">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>
0
Accepted
Hi Christian,
After detailed investigation I found that the context menu positioning problem is due to the following breaking change in Chrome 61 (see release notes):
Here are the solutions
Solution 1
Place the following override over the RadTreeView declaration:
Please test the solution in all browsers and let me know if there are any side effects. For your convenience I have attached the modified aspx file.
Solution 2
Set EnableScreenBoundaryDetection to false. This will disable the screen boundary detection and some parts of the context menu could be rendered beneath the browser borders when there isn't enough space to be rendered on the visible screen. You will have to use the browser scrollbars to show the hidden part of the menu.
You can follow the following sticky note and bug report item for more information and details on the issue.
You can expect a fix for it in R3 2017 SP1, the release date of which is not yet decided.
Regards,
Rumen
Progress Telerik
Thank you for reporting this issue!
After detailed investigation I found that the context menu positioning problem is due to the following breaking change in Chrome 61 (see release notes):
To align with the spec and preserve browser consistency, the scrollingElement is now the documentElement in standards mode.
Chrome 61 has changed the behavior of document.scrollingElement to return document.documentElement instead of document.body to match the CSSOM View specification and this broke the positioning of the context menu when the EnableScreenBoundaryDetection is enabled.Here are the solutions
Solution 1
Place the following override over the RadTreeView declaration:
<script> Telerik.Web.UI.RadMenu._getViewPortSize = function () { var viewPortSize = $telerik.getViewPortSize();​ // The document scroll is not included in the viewport size // calculation under FF/quirks and Edge. var quirksMode = document.compatMode != "CSS1Compat"; if (($telerik.isFirefox && quirksMode) || Telerik.Web.Browser.edge) { viewPortSize.height += document.body.scrollTop; } else if (Telerik.Web.Browser.chrome) { viewPortSize.height += Math.max(document.body.scrollTop, document.scrollingElement.scrollTop); }​ return viewPortSize; };</script><telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server"> <ContextMenus> <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1"runat="server" RenderMode="Lightweight"> <Items> ...Please test the solution in all browsers and let me know if there are any side effects. For your convenience I have attached the modified aspx file.
Solution 2
Set EnableScreenBoundaryDetection to false. This will disable the screen boundary detection and some parts of the context menu could be rendered beneath the browser borders when there isn't enough space to be rendered on the visible screen. You will have to use the browser scrollbars to show the hidden part of the menu.
You can follow the following sticky note and bug report item for more information and details on the issue.
You can expect a fix for it in R3 2017 SP1, the release date of which is not yet decided.
Regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.