jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 2 months ago.

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

Author

Jqx Tree Right Click Issue with source property Posts

March 23, 2015 at 11:10 am Jqx Tree Right Click Issue with source property #68991

Participant

Hi,
I just want to know how can i attach context menu to a particular element in jqxTree given that list elements are not given.
Data is given through source property.

March 23, 2015 at 12:36 pm Jqx Tree Right Click Issue with source property #69000

Nadezhda

Participant

Hello abrahamdivyatej,

Here is an example which shows how to use ‘source’ property and Context Menu on jqxTree. jqxTree always contains li elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../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 () {
            var source = [
             {
                 label: "Item 1", expanded: true, items: [
                   { label: "Item 1.1" },
                   { label: "Item 1.2", selected: true }
                 ]
             },
             { label: "Item 2" },
             { label: "Item 3" },
             {
                 label: "Item 4", expanded: true, items: [
                   { label: "Item 4.1" },
                   { label: "Item 4.2" }
                 ]
             },
             { label: "Item 5" },
             { label: "Item 6" },
             { label: "Item 7" }
            ];
            // Create jqxTree
            $('#jqxTree').jqxTree({ source: source, height: '350px', width: '300px' });
            $('#jqxTree').css('visibility', 'visible');
            var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '56px', 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();
                        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                        return false;
                    }
                });
            }
            attachContextMenu();
            $("#jqxMenu").on('itemclick', function (event) {
                var item = $.trim($(event.args).text());
                switch (item) {
                    case "Add Item":
                        var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                        if (selectedItem != null) {
                            $('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element);
                            attachContextMenu();
                        }
                        break;
                    case "Remove Item":
                        var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                        if (selectedItem != null) {
                            $('#jqxTree').jqxTree('removeItem', selectedItem.element);
                            attachContextMenu();
                        }
                        break;
                }
            });
            // 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='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
    </div>
    <div id='jqxMenu'>
        <ul>
            <li>Add Item</li>
            <li>Remove Item</li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.