Clicking on title or radio button to select Fancytree node

Question

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/

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: https://jsfiddle.net/slothbear/rxtxfk9m/ — slothbear, Dec 17 '15 at 23:17

score 1 · Accepted Answer · answered Jan 25 '17 at 14:36

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!

score 1 · Answer 2 · answered Oct 12 '17 at 23:18

1

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

answered Oct 12 '17 at 23:18

Marek Gralikowski

959
9
9

This allows both title and radio button to activate selection, but leaves previously selected titles highlighted. – slothbear Oct 15 '17 at 01:02
Perhaps I set it up wrong? https://jsfiddle.net/r36ry2da/ Start by clicking on a radio button or two, then try clicking on several titles. – slothbear Oct 15 '17 at 01:08

Clicking on title or radio button to select Fancytree node

2 Answers2