Cannot get contextMenu working on a Tree

[realtekParticipant]

Hi,

I cannot seem to get the ContextMenu working at all on the tree. nothing happens when you right click!

This page is included in a Parent page so the JS files are loaded seperately but everything else works:

Here is my code, any help would be great!

<script>

$(document).ready(function() {

	var tabid = $('script').last().parent().prop('id');

	var theme = "web";

	var sequence = "";

$('#DBASplitter').jqxSplitter({ height: '100%', width: '100%', theme: theme, panels: [{ size: '20%'},{ size: '80%'}] });

$.ajax(

{

   url: 'json/dba/dba_treeview.php',

   type: 'POST',

   dataType: "json",

   data:

 	{

 		name: 'View_Name',

		name: 'View_Display_Name',

		name: 'Table_Sequence'

	},

   success: function (data)

   {

       var dataAdapter = new $.jqx.dataAdapter(data);

                dataAdapter.dataBind();

                var records = dataAdapter.getGroupedRecords(['View_Name'], 'items', 'label', [{  name: 'View_Name', map: 'value'}, {name: 'View_Display_Name', map: 'label'}, {name: 'Table_Sequence', map: 'value'}], 'row', 'value');

                $('#DBATree').jqxTree({allowDrag: false, allowDrop: false, source: records, height: '100%', width: '99%', theme: theme})

                var treeItems = $('#DBATree').jqxTree('getItems');

                var firstItem = treeItems[0];

                var firstItemElement = firstItem.element;

                $('#DBATree').jqxTree('addBefore', {label : 'Test'}, firstItemElement);

				$('#DBATree').jqxTree('selectItem',  $("#DBATree").find('li:first')[0]);

                }});

				var menuSource = [

                { label: "Add Item" },

                { label: "Remove Item" }

             ];

			var contextMenu = $("#jqxMenu").jqxMenu({ source: menuSource, width: '120px', theme: theme, height: '56px', autoOpenPopup: false, mode: 'popup' });

            var clickedItem = null;

            var attachContextMenu = function () {

                // open the context menu when the user presses the mouse right button.

                $("#DBATree li").on('mousedown', function (event) {

                    var target = $(event.target).parents('li:first')[0];

                    var rightClick = isRightClick(event);

                    if (rightClick && target != null) {

                        $("#DBATree").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;

            }

}); // End JQuery

</script>

<style>

#DBAContent {

	 width:100%;

    height:100%;

}

</style>

            <div class="jqx-hideborder" id="DBASplitter">

                <div>

                      <div class="jqx-hideborder" id='DBATree'>

                        </div>

                </div>

                <div id="DBAContent">

                </div>

            </div>

				<div id='jqxMenu'>

			</div>

[Peter StoevKeymaster]

Hi realtek,

You can look at the jqxTree’s Online Samples. There is already a sample of a Tree with a Context Menu.

Best Regards,
Peter Stoev

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

[realtekParticipant]

Hi Peter,

Thank you, I resolved this issue so its all sorted now.

Thanks,

[Author]

Posts