Treeview context menu covered by page default context menu

7 posts, 3 answers
  1. Daochuen
    Daochuen avatar
    51 posts
    Member since:
    Sep 2017

    Posted 22 Nov 2019 Link to this post

    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;
        }
    ...

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    445 posts

    Posted 26 Nov 2019 Link to this post

    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

    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.
  3. Daochuen
    Daochuen avatar
    51 posts
    Member since:
    Sep 2017

    Posted 26 Nov 2019 in reply to Dimitar Link to this post


    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>
  4. Answer
    Dimitar
    Admin
    Dimitar avatar
    445 posts

    Posted 27 Nov 2019 Link to this post

    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

    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.
  5. Daochuen
    Daochuen avatar
    51 posts
    Member since:
    Sep 2017

    Posted 27 Nov 2019 in reply to Dimitar Link to this post

    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

  6. Answer
    Dimitar
    Admin
    Dimitar avatar
    445 posts

    Posted 28 Nov 2019 Link to this post

    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

    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.
  7. Daochuen
    Daochuen avatar
    51 posts
    Member since:
    Sep 2017

    Posted 29 Nov 2019 in reply to Dimitar Link to this post

    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!


Back to Top