jQuery FancyTree, on click expand issue

Question

I'm doing selection tree with help of FancyTree plugin and I'm trying to implement on click event which would work in way when you click on title of select box, all of his subitems and gets expanded in all levels.

To begin with... let me show you the script:

var treeData = [
    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!",
        children: [
            {title: "Sub-item 3.1",
                children: [
                    {title: "Sub-item 3.1.1", key: "id3.1.1" },
                    {title: "Sub-item 3.1.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ]
    },
    {title: "item2: selected on init", 
         children: [
            {title: "Sub-item 4.2",
                children: [
                    {title: "Sub-item 4.2.1", key: "id3.1.1" },
                    {title: "Sub-item 3.2.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ] },
];

$(function(){

            $(".test").fancytree({
    //          extensions: ["select"],
                checkbox: true,
                selectMode: 3,
                source: treeData,
                select: function(e, data) {
                    // Get a list of all selected nodes, and convert to a key array:
                    var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
                        return node.key;
                    });
                    $("#echoSelection3").text(selKeys.join(", "));

                    // Get a list of all selected TOP nodes
                    var selRootNodes = data.tree.getSelectedNodes(true);
                    // ... and convert to a key array:
                    var selRootKeys = $.map(selRootNodes, function(node){
                        return node.key;
                    });
                    $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
                    //$("#echoSelectionRoots3").text(selRootNodes.join(", "));
                },
                //this is problematic one
                click: function(e, data) {
                   data.node.toggleExpanded();
                },
                keydown: function(e, data) {
                    if( e.which === 32 ) {
                        data.node.toggleSelected();
                        return false;
                    }
                },
                // The following options are only required, if we have more than one tree on one page:
    //              initId: "treeData",
                cookieId: "fancytree-Cb3",
                idPrefix: "fancytree-Cb3-"
            });
            $("#btnToggleExpand").click(function(){
                $(".test").fancytree("getRootNode").visit(function(node){
                    node.toggleExpanded();
        });
        return false;
    });

        });

ISSUE

I tried to do so with this part of code:

click: function(e, data) {
               data.node.toggleExpanded();
            },

But the problem is that it expand subitems of selectbox on select too, and I do not wanna that. And if you expand one node, and you try to open another one with the help of arrows on left, that second node expands and hides on click to arrow, which is not what I want..

You can see and edit situation in here: http://jsfiddle.net/9vAhZ/

So you migh said I got in some sort of "no way out" siutation and I need help from someone smarter to show me how could I sort this out, which event to use so it does not clashes it with fancytree default behaviour.

Any help or suggestion is welcome.

Answer 1

You check if the click was on select button

click: function(event, data) {
    var node = data.node,
        tt = $.ui.fancytree.getEventTargetType(event.originalEvent);
    if( tt === "checbox" ) {
        ...
    }
},

or implement this in the select event instead of click.

Answer 2

spelling

if(tt = "checkbox"){
...
}