Hello,
I have kendo treeview in my MVC project. Treeview context menu
was showed well in IE by right mouse clicking, but in Firefox the treeview context
menu was covered by page default context menu. Could someone have the tip to resolve
the context menu issue with Firefox? Below
are pieces of code for context menu. Attached image is context menu showed in
IE and Firefox.
Thanks in advance.
...
function
CreateContextMenu(targetTree) {
var
cxtMenuUl = $('#treeViewContextMenu');
cxtMenuUl.css("white-space", "nowrap");
if
(cxtMenuUl) {
cxtMenuUl.kendoContextMenu({
//
listen to right-clicks on treeview container
target: targetTree,
dataSource: getContextData(),
orientation:
"vertical",
select: selectFolderContextMenu,
filter: ".k-state-selected",
open: onOpenLeftContextMenu
});
}
}
function
getContextData () {
var data =
[{ text: 'Delete', attr: { id: 'delete' } },
{
text: "", cssClass: "k-separator" },
{
text: 'Rename', attr: { id: 'rename' } },
{
text: "", cssClass: "k-separator" },
{
text: 'New Folder', attr: { id: 'newfolder' } },
{
text: "", cssClass: "k-separator" },
{
text: 'Upload', attr: { id: 'upload' } }];
return
data;
}
...
6 Answers, 1 is accepted
Hello,
Testing the given setup on my side, I am not reproducing the issue - Dojo snippet.The Dojo is based on the snippet and Show Node Context Menu example. As the ContextMenu filter is .k-state-selected, the menu could be activated only for the currently selected TreeView node. If you have some additional logic for selecting a node on right click, probably it works differently in IE and Firefox, setting selected state in Firefox a little slower. Is the issue reproducible on your side in the same Dojo snippet? If not, could you try to modify the Dojo snippet so that the issue is reproducible and send the modified Dojo URL? And if the issue is reproducible only in an MVC scenario, it would be helpful, if you provide a runnable isolated project for reproduction as some specific configuration may be needed for reproduction.
As a side note, I see product version is set to 2019.3.1120, which is our latest internal build. I tested with this version as well and the issue is not reproducible on my side. Is the issue reproducible with 2019.3.1023, which is an official release version.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Veteran
Iron
Hi Dimitar,
Thanks for the responding my post. I created very simple html page with the code you provided (only changed referenced .js and .css files), the situation remain the same. It seems the error does not related MVC project. The version of Kendo.Mvc we used is 2016.3.1118.545. The version of Firefox Browser is 70.0 (64 - bit). I run your Dojo snippet in other machine with Firefox 70.0.1 version installed. It worked. BTY, I don't have chance to run the Dojo in my development machine since it be locked from outside connection. I copied exactly running code in my dev environment below. Hope you could get clue. Thanks again for your help!
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<!--<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css" />-->
<link href="../Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="../Content/kendo/kendo.default.min.css" rel="stylesheet" />
<link href="../Content/kendo/kendo.bootstrap.min.css" rel="stylesheet" />
<!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>-->
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/kendo/kendo.all.min.js"></script>
</head>
<body>
<ul id="treeview">
<li data-expanded="true">
<span class="k-sprite folder"></span>
My Website
<ul>
<li><span class="k-sprite html"></span>index.html</li>
<li><span class="k-sprite image"></span>body-back.png</li>
<li><span class="k-sprite image"></span>my-photo.jpg</li>
</ul>
</li>
</ul>
<ul id="treeViewContextMenu"></ul>
<script>
$(document).ready(function() {
$("#treeview").kendoTreeView();
function CreateContextMenu(targetTree) {
var cxtMenuUl = $('#treeViewContextMenu');
cxtMenuUl.css("white-space", "nowrap");
if (cxtMenuUl) {
cxtMenuUl.kendoContextMenu({
// listen to right-clicks on treeview container
target: targetTree,
dataSource: getContextData(),
orientation: "vertical",
//select: selectFolderContextMenu,
filter: ".k-state-selected",
// open: onOpenLeftContextMenu
});
}
}
function getContextData () {
var data = [{ text: 'Delete', attr: { id: 'delete' } },
{ text: "", cssClass: "k-separator" },
{ text: 'Rename', attr: { id: 'rename' } },
{ text: "", cssClass: "k-separator" },
{ text: 'New Folder', attr: { id: 'newfolder' } },
{ text: "", cssClass: "k-separator" },
{ text: 'Upload', attr: { id: 'upload' } }];
return data;
}
CreateContextMenu("#treeview");
});
</script>
<style scoped>
/* allow menu to break out of treeview container */
div.k-treeview {
overflow: visible;
}
#treeview .k-sprite {
/*background-image: url("https://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");*/
}
.folder {background-position: 0 -16px;}
.html {background-position: 0 -48px;}
.image {background-position: 0 -64px;}
</style>
</body>
</html>
Hi,
I created a new Dojo which uses 2016.3.1118. The issue is not reproducible on my side. While testing though, I noticed that if I right-click two times in a row over a selected TreeView node without moving the mouse, the first click brings Kendo ContextMenu, then the second click falls over that ContextMenu and brings browser's context menu. This is expected and happens in IE and Chrome as well. So I think on your machine you are experiencing a strange Firefox issue, which triggers right mouse click two times in a row. Such issues are commented in this StackExchange thread, this StackExchange thread and this StackExchange thread. I hope this is helpful.
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Veteran
Iron
Thanks Dimitar.
Oddly enough, all our dev machines have same behavior in Firefox. If we press Alt key or some other keys browser's default context menu will go away. I try to trigger key press event programmatically ( see below code) .No success - the default context menu still shown.
jQuery.event.trigger({ type: 'keypress', which: 102 }); //F=102, esc=27, alt=18
Hi,
If the issue is related to specific software or even hardware and its settings, it is possible that an issue is reproducible on all machines. I searched for such an issue with ContextMenu and Firefox, but there is no other report about this in our records.
I would suggest you to test if right click is triggered two times in Firefox on the following jQuery demo, when clicking in the rectangle. Also is there any difference in Firefox, when changing the setting as suggested in threads: "For the Firefox, just go to about:config and change ui.context_menus.after_mouseup to true" ?
Regards,
Dimitar
Progress Telerik
Rank 1
Iron
Veteran
Iron
Hi Dimitar,
As you guessed the machines in our DEV environment configured same way : “Dom.event.contextmenu.enabled : false” and status is “locked” which means users have no way to remove the default context menu except press some keys. Thank you for the good tips and full support!