jQWidgets Forums

Tagged: Context Menu, dataadapter, jqxMenu, jqxtree, Menu, source, Tree

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

Context Menu on jqxTree li element Posts

February 24, 2015 at 2:58 pm Context Menu on jqxTree li element #67574

Participant

Hi, I’m trying to get the same right-click menu behaviour as showed in: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treepopup.htm

My jqxTree is created using var dataAdapter = new $.jqx.dataAdapter(source);

problem is when trying to open the menu onRightclick on ‘li’ element (nothing happens):

$(“#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;
}
});

question is… Do really exist ‘li’ elements when creating jqxTree with jqx.dataAdapter(source) ???

February 25, 2015 at 8:27 am Context Menu on jqxTree li element #67620

Nadezhda

Participant

Hello omargarro,

Here is an example which shows how to use dataAdapter and JSON in Context Menu on jqxTree. If you open developer tool in your browser you can find that really exist ‘li’ elements in the Tree. 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="../../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/jqxexpander.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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            {
                "id": "2",
                "parentid": "1",
                "text": "Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "3",
                "parentid": "1",
                "text": "Peppermint Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "4",
                "parentid": "1",
                "text": "Salted Caramel Hot Chocolate",
                "value": "$2.3"
            }, {
                "id": "5",
                "parentid": "1",
                "text": "White Hot Chocolate",
                "value": "$2.3"
            }, {
                "text": "Chocolate Beverage",
                "id": "1",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "6",
                "text": "Espresso Beverage",
                "parentid": "-1",
                "value": "$2.3"
            }, {
                "id": "7",
                "parentid": "6",
                "text": "Caffe Americano",
                "value": "$2.3"
            }, {
                "id": "8",
                "text": "Caffe Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "9",
                "text": "Caffe Mocha",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "10",
                "text": "Cappuccino",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "11",
                "text": "Pumpkin Spice Latte",
                "parentid": "6",
                "value": "$2.3"
            }, {
                "id": "12",
                "text": "Frappuccino",
                "parentid": "-1"
            }, {
                "id": "13",
                "text": "Caffe Vanilla Frappuccino",
                "parentid": "12",
                "value": "$2.3"
            }, {
                "id": "15",
                "text": "450 calories",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "16",
                "text": "16g fat",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "17",
                "text": "13g protein",
                "parentid": "13",
                "value": "$2.3"
            }, {
                "id": "14",
                "text": "Caffe Vanilla Frappuccino Light",
                "parentid": "12",
                "value": "$2.3"
            }]
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value' }
                ],
                id: 'id',
                localdata: data
            };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
            // specifies the mapping between the 'text' and 'label' fields.  
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            $('#jqxTree').jqxTree({ source: records, width: '300px' });
            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'>
    </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.