Add button to fancytree node to delete/remove that node?

Question

I cannot find an example to do this anywhere, although I could have sworn I've seen one in the past.

I want to add a button to a node in fancytree so that either on hovering over that node (or maybe on selecting it) the button displays (a white x on a red circle, for example) and clicking it will delete/remove that node. At all other times the delete button should be hidden for the node.

I've been unable to find any kind of example where a custom link or button is added to a fancytree node though - maybe it's not possible to do or I'm just using the wrong search terms?

Edit: I found a way to add a clickable button by appending html to the title string:

title: component.name() + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",

And by 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 is therefore subject to the highlighting of the title when active. It would be better if there was a way to add this to the node OUTSIDE of the title text. Is that possible Martin?

Hyphen

Answer 1

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

Gate

Thanks for the solution, @Rasheed! It works except the delete button gets added multiple times on the lines that are double-clicked. Here is an example: kfecms.sleimanmatar.com/sleiman/test-fancyTree.html. Any idea how to prevent multiple buttons? – Aconcagua

One way that works is to check if node.span.innerHTML contain the button before adding it once again. Is there a neater solution? – Aconcagua

Answer 2

I normally use css ':after' for such cases (https://developer.mozilla.org/de/docs/Web/CSS/::after). If that is not enough, you can always tweak the markup in the 'renderNode' event.

Dungeon