Add a button to fancytree node to remove / remove that node?
I cannot find an example to do this anywhere, although I could swear I have seen one in the past.
I want to add a button to a node in a fancytree so that either when hovering over that node (or possibly selecting) the button displays (like a white x on a red circle) and clicking it will remove / remove that node. In all other cases, the delete button must be hidden for node.
I haven't been able to find any example where a custom link or button is added to a fancytree node, though - is it probably not possible, or am I just using the wrong search terms?
Edit: I found a way to add a clickable button by adding html to the title bar:
title: component.name() + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",
And adding some custom css to my site file:
span.fancytree-node span.deleteButton {
display: none;
}
span.fancytree-active span.deleteButton {
margin-left: 10px;
display: inline-block;
}
But this adds the button to the title text and therefore is subject to title highlighting when active. It would be better if there was a way to add this to the node OUTSIDE of the title text. Is it possible Martin?
source to share
$("#tree").fancytree({
source: [...],
renderNode: function (event, data) {
var node = data.node;
var $nodeSpan = $(node.span);
// check if span of node already rendered
if (!$nodeSpan.data('rendered')) {
var deleteButton = $('<button type="button" class="btn">delete node</button>');
$nodeSpan.append(deleteButton);
deleteButton.hide();
$nodeSpan.hover(function () {
// mouse over
deleteButton.show();
}, function () {
// mouse out
deleteButton.hide();
})
// span rendered
$nodeSpan.data('rendered', true);
}
}
});
source to share
I usually use css ': after' for cases like this ( https://developer.mozilla.org/de/docs/Web/CSS/::after ). If that's not enough, you can always customize the markup in the "renderNode" event.
source to share