Dynamic Context menu with jqxTree and AngularJS - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angularjs, Context Menu, dynamic, item, jqxMenu, jqxtree, Menu, Tree

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

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

Author

Dynamic Context menu with jqxTree and AngularJS Posts

May 5, 2015 at 9:54 am Dynamic Context menu with jqxTree and AngularJS #70650

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,

May 7, 2015 at 7:47 am Dynamic Context menu with jqxTree and AngularJS #70769

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/

May 12, 2015 at 8:36 am Dynamic Context menu with jqxTree and AngularJS #70973

Ankit Shah

Participant

Thanks you, Dimitar.

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

Thanks,

May 13, 2015 at 7:08 am Dynamic Context menu with jqxTree and AngularJS #71046

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/

May 13, 2015 at 8:28 am Dynamic Context menu with jqxTree and AngularJS #71053

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,

May 14, 2015 at 8:24 am Dynamic Context menu with jqxTree and AngularJS #71105

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/

Author

Posts

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

You must be logged in to reply to this topic.