Clicking on title or radio button to select Fancytree node

2
votes

I'm using Fancytree for radio buttons. I'd like to be able to click on either the title or the associated radio button to select the node.

With basic Fancytree initialization,

$("#tree").fancytree({
  checkbox: true,    // turn on checkboxes
  selectMode: 1      // allow only a single selection
});

clicking on the node title highlights the title, but doesn't tick the radio button. After that, ticking a radio button selects the node, but the highlight on the previously selected node remains. Try it here: https://jsfiddle.net/slothbear/db4gzh47

I've read the FAQ that Fancytree maintains separate states for active, selected, focused, and hovered. I've tried a lot of the events to keep the node selection and activation in sync, but haven't found the right combo yet.

Is there a way to simulate the behavior of labeled HTML radio buttons, where you can click on either the label or the radio button? Example: http://jsfiddle.net/Gu55B/1/

2
fancytree
The only event triggered by both the radio button and the title is click. I tried adding data.node.setSelected(true) to that event. That works ok when clicking on the label. When the radio button is clicked, it looks like the node is not selected. Actually the node gets selected, but then deselected – I think because my setSelected updated the value of lastSelectedNode? Test here: jsfiddle.net/slothbear/rxtxfk9m - slothbear

2 Answers

2
votes

I tried to add a return false and it works. Try something like that:

$("#tree").fancytree({
  checkbox: true,
  selectMode: 1,
  click: function(event, data){
    // data.node.setSelected(true) will work too
    data.node.toggleSelected();
    return false;
  }
});

Hope that it helps!

1
votes

To have still expander functionality add condition like this:

    $(".tree").fancytree({
        checkbox: true,
        selectMode: 1,
        click: function(event, data){
            if (data.targetType === 'title') {
                data.node.toggleSelected();
            }
        }
    });