jQuery UI Widgets Forums Navigation Tree Dynamic Context menu with jqxTree and AngularJS

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • Ankit Shah
    Participant

    Hello jqx Team,

    Can you please suggest to dynamically generate and show context menu for tree nodes. I am using AngularJS to render a tree.
    Details:
    =========
    I have a tree renderning with three nodes, Node 1, Node 2, Node 3.
    I need to display a context menu based on which node has been selected. for e.g. if I select Node 1 and invoke context menu on it, the context menu should have “Node 1.1, Node 1.2” as its items. And if I invoke context menu for Node 2, context menu should have “Node 2.1, Node 2.2” as its items.

    Can you please suggest how should this be achieve through jqx and AngularJS?

    Thanks in advance,


    Dimitar
    Participant

    Hello Ankit Shah,

    Here is an example of a jqxTree context menu with dynamic items:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxTree
                $('#jqxTree').jqxTree({ height: '400px', width: '300px' });
                $('#jqxTree').css('visibility', 'visible');
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '130px', height: '100px', autoOpenPopup: false, mode: 'popup' });
                var clickedItem = null;
    
                var attachContextMenu = function () {
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxTree li").on('mousedown', function (event) {
                        var target = $(event.target).parents('li:first')[0];
    
                        var rightClick = isRightClick(event);
                        if (rightClick && target != null) {
                            $("#jqxTree").jqxTree('selectItem', target);
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
    
                            var item = $('#jqxTree').jqxTree('hitTest', event.pageX, event.pageY);
                            if (item) {
                                $('#node1').text(item.label + '.1');
                                $('#node2').text(item.label + '.2');
                            }
    
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
                }
                attachContextMenu();
    
                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e) {
                    if ($(e.target).parents('.jqx-tree').length > 0) {
                        return false;
                    }
                    return true;
                });
    
                function isRightClick(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li>PC products</li>
                            <li>Mobile products</li>
                            <li>All products</li>
                        </ul>
                    </li>
                    <li>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                            <li>Knowledge base</li>
                            <li>Books</li>
                            <li>Training and certification</li>
                            <li>Support programs</li>
                            <li>Forums</li>
                            <li>Documentation</li>
                            <li>Updates</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id='jqxMenu'>
                <ul>
                    <li id="node1"></li>
                    <li id="node2"></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Ankit Shah
    Participant

    Thanks you, Dimitar.

    Can you please show how to achieve the same with AngularJS?

    Thanks,


    Dimitar
    Participant

    Hi Ankit Shah,

    Here is a different version of the same example, with the tree initialized with AngularJS from a jqx-tree tag:

    <!DOCTYPE html>
    <html lang="en" ng-app="demoApp">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
                // Create jqxTree
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '130px', height: '100px', autoOpenPopup: false, mode: 'popup' });
                var clickedItem = null;
    
                var attachContextMenu = function () {
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxTree li").on('mousedown', function (event) {
                        var target = $(event.target).parents('li:first')[0];
    
                        var rightClick = isRightClick(event);
                        if (rightClick && target != null) {
                            $("#jqxTree").jqxTree('selectItem', target);
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
    
                            var item = $('#jqxTree').jqxTree('hitTest', event.pageX, event.pageY);
                            if (item) {
                                $('#node1').text(item.label + '.1');
                                $('#node2').text(item.label + '.2');
                            }
    
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
                }
                attachContextMenu();
    
                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e) {
                    if ($(e.target).parents('.jqx-tree').length > 0) {
                        return false;
                    }
                    return true;
                });
    
                function isRightClick(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
            });
             
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' ng-controller="demoController">
            <jqx-tree id="jqxTree" jqx-width="'300px'" jqx-height="'300px'">
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li>PC products</li>
                            <li>Mobile products</li>
                            <li>All products</li>
                        </ul>
                    </li>
                    <li>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                            <li>Knowledge base</li>
                            <li>Books</li>
                            <li>Training and certification</li>
                            <li>Support programs</li>
                            <li>Forums</li>
                            <li>Documentation</li>
                            <li>Updates</li>
                        </ul>
                    </li>
                </ul>
            </jqx-tree>
            <div id='jqxMenu'>
                <ul>
                    <li id="node1"></li>
                    <li id="node2"></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Ankit Shah
    Participant

    Dimitar,
    Thanks for your quick turnaround on this issue. Actually, I should have been more clear on what I need.

    I need jqx-menu created on the fly when user right-click on tree node. In your e.g. menu is defined in DOM, but I need that should be created when contex menu is pulled on tree node.

    Can you please suggest a way to achieve this functionality?

    Thanks,


    Dimitar
    Participant

    Hi Ankit Shah,

    Here is what we can offer you as a solution:

    <!DOCTYPE html>
    <html lang="en" ng-app="demoApp">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
                var contextMenu = $('<div><ul><li id="node1"></li><li id="node2"></li></ul></div>');
    
                var clickedItem = null;
    
                var menuCreated = false;
    
                var attachContextMenu = function () {
                    // open the context menu when the user presses the mouse right button.
                    $("#jqxTree li").on('mousedown', function (event) {
                        var target = $(event.target).parents('li:first')[0];
    
                        var rightClick = isRightClick(event);
                        if (rightClick && target != null) {
    
                            $("#jqxTree").jqxTree('selectItem', target);
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
    
                            var item = $('#jqxTree').jqxTree('hitTest', event.pageX, event.pageY);
                            if (item) {
                                if (menuCreated === false) {
                                    $('body').append(contextMenu);
                                    contextMenu.jqxMenu({ width: '130px', height: '100px', autoOpenPopup: false, mode: 'popup' });
                                    menuCreated = true;
                                }
    
                                $('#node1').text(item.label + '.1');
                                $('#node2').text(item.label + '.2');
                            }
    
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    });
                }
                attachContextMenu();
    
                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e) {
                    if ($(e.target).parents('.jqx-tree').length > 0) {
                        return false;
                    }
                    return true;
                });
    
                function isRightClick(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
            });
             
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' ng-controller="demoController">
            <jqx-tree id="jqxTree" jqx-width="'300px'" jqx-height="'300px'">
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li>PC products</li>
                            <li>Mobile products</li>
                            <li>All products</li>
                        </ul>
                    </li>
                    <li>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                            <li>Knowledge base</li>
                            <li>Books</li>
                            <li>Training and certification</li>
                            <li>Support programs</li>
                            <li>Forums</li>
                            <li>Documentation</li>
                            <li>Updates</li>
                        </ul>
                    </li>
                </ul>
            </jqx-tree>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.