jqxTree context menu itemclick handler

[josephjmariniParticipant]

I am using a jqxTree with context menu’s.
I can get the different context menu’s to display just fine.
I can also register the jqx menu itemclick event handler.
However it only gets called once, when I register the handler and then never again.

I have created a wrapper class to handle the functionality of the jqxTree allowing me to change what tree
I am using and keeping API the functionality the same.

below are the snips of code used to create and initialize the tree, and setup the context menus

I am new to modern javascript so I am currently still in the learning phase.
Any help with this matter would be appreciate any help with this issue.

thanks in advance

/Joe

this._detectionsTree = null;

this._detectionsContextMenuId = “#detectionsContextMenu”;
this._detectionsContextMenu;

this._detectionsGroupContextMenuId = “#detectionsGroupContextMenu”;
this._detectionsGroupContextMenu;

this._detectionsTree = new DragonflyJQXTree(
this._detectionsTreeId,
groupNodes,
“ui/detection/folder.png”,
true
);

this._detectionsTree._initialize();

//
// create the detections context menu
//
this._detectionsContextMenu = this._detectionsTree.createContextMenu(this._detectionsContextMenuId,
‘150px’,
‘110px’,
‘darkblue’);

//
// create the detections group context menu
//
this._detectionsGroupContextMenu = this._detectionsTree.createContextMenu(this._detectionsGroupContextMenuId,
‘150px’,
’60px’,
‘darkblue’);

this._detectionsTree._registerNodeContextMenuOpen(this._detectionsContextMenu);

this._detectionsTree._registerGroupContextMenuOpen(this._detectionsGroupContextMenu);

this._detectionsTree._registerOnClickHandlerContextMenu(this._detectionsContextMenuId,this._detectionsContextMenuHandler);

this._detectionsTree._registerOnClickHandlerContextMenu(this._detectionsGroupContextMenuId,this._detectionsGroupContextMenuHandler);

function DragonflyJQXTree(treeElementId,
nodeData,
defaultIcon,
checkbox) {

this._treeElementId = treeElementId;
this._nodeData = nodeData;
// this._contextMenuFunction = contextMenuFunction;
// this._nodeTypes = nodeTypes;
this._defaultIcon = defaultIcon;
this._checkbox = checkbox;
this._jqxtree = null;
}

DragonflyJQXTree.prototype._initialize = function() {

var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentId’ },
{ name: ‘value’},
{ name: ‘text’ },
{ name: ‘type’ },
{ name: ‘icon’}
],
id: ‘id’,
localdata: this._nodeData
};
// 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’}]);

//this._jqxtree = $(this._treeElementId).jqxTree({ source: records, height: ‘400px’, hasThreeStates: true, checkboxes: true, width: ‘330px’});
this._jqxtree = $(this._treeElementId).jqxTree({theme: ‘ui-overcast’, source: records, height: ‘500px’, hasThreeStates: true, checkboxes: true, width: ‘200px’});
$(this._treeElementId).css(‘visibility’, ‘visible’);
//$(this._treeElementId).jqxCheckBox({ width: ‘200px’, height: ’25px’, checked: true });
//$(this._treeElementId).jqxCheckBox({ width: ‘100px’, height: ‘100px’, checked: true });
$(this._treeElementId).on(‘change’, function (event) {
var checked = event.args.checked;
$(this._treeElementId).jqxTree({ hasThreeStates: checked });
});

//$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’});

};

DragonflyJQXTree.prototype._isRightClick = function(event) {
var rightclick = null;

if (!event) {
var event = window.event;
}

if (event.which) {
rightclick = (event.which == 3);
} else if (event.button) {
rightclick = (event.button == 2);
}

return rightclick;
};

/**
* disable the default browser’s context menu.
*/
DragonflyJQXTree.prototype._disableDefaultContextMenu = function() {
$(document).bind(‘contextmenu’, function (e) {
if ($(e.target).parents(‘.jqx-tree’).length > 0) {
return false;
}

return true;
});
};

DragonflyJQXTree.prototype._registerNodeContextMenuOpen = function(contextMenu) {

var menu = contextMenu;
var instance = this;

//
// open the context menu when the user presses the mouse right button and the level matches
// group id’s are normally negative values
//
$(instance._treeElementId).on(‘mousedown’, function (event) {

var rightClick = instance._isRightClick(event);

if (rightClick) {
var target = $(event.target).parents([0]);
// if (target[0].id < 0) {
// return false;
// }

var items = $(instance._treeElementId).jqxTree(‘getItems’);
var itemFlag = false;
for (var i = 0; i < items.length; i++) {
var currentItem = items[i];
if (target[0].id == currentItem.id) { //&& currentItem.level == level) {
itemFlag = true;
break;
}
}

if (itemFlag == true) {
$(instance._treeElementId).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

menu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

return false;
}
}

return false;

});
};

DragonflyJQXTree.prototype._registerGroupContextMenuOpen = function(contextMenu) {

var menu = contextMenu;
var instance = this;
//
// open the context menu when the user presses the mouse right button for groups
// group id’s are normally negative values
//
$(instance._treeElementId).on(‘mousedown’, function (event) {

var rightClick = instance._isRightClick(event);
if (rightClick) {

var target = $(event.target).parents([0]);
if (target[0].id < 0) {
return false;
}

var items = $(instance._treeElementId).jqxTree(‘getItems’);
var itemFlag = false;
for (var i = 0; i < items.length; i++) {
var currentItem = items[i];
if (target[0].id == currentItem.id) { //&& currentItem.level == level) {
itemFlag = true;
break;
}
}

//var rightClick = this._isRightClick(event);
if (itemFlag == true) {
$(instance._treeElementId).jqxTree(‘selectItem’, target);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

menu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

return false;
}
}

return false;
});
};

DragonflyJQXTree.prototype.createContextMenu = function(contextMenuId,
width_px,
height_px,
themeForMenu) {

return contextMenu = $(contextMenuId).jqxMenu(
{ width: width_px, //’120px’,
//theme: ‘darkblue’,
height: height_px, //’56px’,
autoOpenPopup: false,
mode: ‘popup’ }
);
};

DragonflyJQXTree.prototype._registerOnClickHandlerContextMenu = function(contextMenuId, functionHandler) {
$(contextMenuId).bind(‘itemclick’, functionHandler(event));
};

[josephjmariniParticipant]

I solved this issue.
In the raper class I had to create the function and then call the passed in function.
Not sure why I needed to do this. Again I am still learning javascript.

DragonflyJQXTree.prototype._registerOnClickHandlerContextMenu = function(contextMenuId, functionHandler) {
$(contextMenuId).on(‘itemclick’, function (event) {
functionHandler(event);
});
};

[Author]

Posts