Avoid onNodeSelected event if button or link is added to LI

[slolo2000]

Hello,

It would be nice to prevent event propagation to onNodeSelectedEvent when a html content is add to node with onNodeRendered event.

Here is an example:

onNodeRendered: function (event, node) {
	node.$el.append($('<a href="' + node.url + '" class="btn btn-warning btn-xs pull-right prevent-click" target="_blank"><i class="fa fa-rss prevent-click"></i></a>'));
}

When I click on the link, to "click" event is also propagated to li node element. I haven't found an option or parameter to avoid this.

So, I have had an idea. I have added a custom class named "prevent-click" and modify the source code in Tree.prototype._clickHandler function (see below).

Is it the good way to do this and if yes, can you add it for the newt release?

Thanks in advance and have a nice day.

Tree.prototype._clickHandler = function (event) {

	var target = $(event.target);
	var node = this.targetNode(target);
	if (!node || node.state.disabled) return;

	var classList = target.attr('class') ? target.attr('class').split(' ') : [];

	// BEGIN: The new code
	if(classList.indexOf("prevent-click")!==-1){
		return;
	}
	// END: The new code

	if ((classList.indexOf('expand-icon') !== -1) || (classList.indexOf('prevent-click') !== -1)) {
		this._toggleExpanded(node, $.extend({}, _default.options));
	}
	else if ((classList.indexOf('check-icon') !== -1)) {
		if (node.checkable) {
			this._toggleChecked(node, $.extend({}, _default.options));
		}
	}
	else {
		if (node.selectable) {
			this._toggleSelected(node, $.extend({}, _default.options));
		} else {
			this._toggleExpanded(node, $.extend({}, _default.options));
		}
	}
};

[skateman]

@slolo2000 you can set the tree node not to be selectable or checkable. If you want to have the selection/checking but not the handler to be fired, you can add a data attribute and then write your event handlers that will do nothing if that data attribute is set to something.

[slolo2000]

Hi skateman

Thanks for your answer and sorry for the delay. You are probably right, but the real question is how to avoid raising onNodeSelected event when I click on the link I have added in onNodeRendered?

Can you write me a simple example if possible?

[skateman]

@slolo2000 why do you need the <a> tag there? Isn't more convenient to go to an URL using the onNodeSelected handler?

[slolo2000]

I have added it because I want to have two different behavior (see screenshot).

When I click on the node, I want to display one web page and when I click on the RSS link, I want to open a new page which display the RSS content.

[skateman]

I am pretty sure that this whole link-thing can be avoided, see https://github.com/patternfly/patternfly-bootstrap-treeview/pull/43#issuecomment-309017255

[slolo2000]

The event's target in the onNodeSelected seems to be always set to the main div. Or maybe I do not quite understand the thing I have to do. But anyway, thanks a lot for your help.

[WebAutomationru]

I found) try use instead

[wysiecki]

I found) try use instead

Hi, came across same problem, can u give an example, or few more words, how u solved it ? THX