Jquery Dynatree , only the child node is selectable?

Question

I have a dynatree with multiple parent and child nodes.I am getting the json data and passing to the dynatree to form a tree structure.

$(document).ready(function() {
                $("#tree").dynatree({
                checkbox: true,
                classNames: {checkbox: "dynatree-radio"},
                hasChildren:true,
                selectMode: 1,
                onDblClick: function(node, event) {
                    node.toggleSelect();
                },
                onKeydown: function(node, event) {
                    if( event.which == 32 ) {
                    node.toggleSelect();
                    return false;
                    }
                },
      <%=codesJSON%>
            });
    });

The nodes can be selected using a radio button. enter image description here i would like to select only the child node when the tree is fully loaded and the parent node is just for visibility.I have tried using the unselectable property but it doesn't seem to be working for my case.

Is there a way to achieve this.

Kindly help thanks...

Set up a jsfiddle for it - http://jsfiddle.net/jegadeesb/zRPfx/2/

Arun P Johny Arun P Johny · Accepted Answer · 2013-08-14T04:09:46

in the node definition set the option isFolder: true and unselectable : true

ex

$(function() {
    // Variant 1:
    $("span.dynatree-edit-icon").live("click", function(e) {
        alert("Edit " + $.ui.dynatree.getNode(e.target));
    });
    $("#tree").dynatree({
        checkbox : true,
        classNames : {
            checkbox : "dynatree-radio"
        },
        onActivate : function(node) {
            // $("#info").text("You activated " + node);
        },
        onRender : function(node, nodeSpan) {
            $(nodeSpan)
            .find('.dynatree-icon')
            .before('<span class="dynatree-icon dynatree-edit-icon"></span>');
        },
        // Variant 2:
        onClick : function(node, e) {
            if ($(e.target).hasClass("dynatree-edit-icon")) {
                $("#info").text("You clicked " + node + ",  url=" + node.url);
            }
        },
        children : [{
            title : "Item 1"
        }, {
            title : "Folder 2",
            isFolder : true,
            unselectable : true,
            children : [{
                title : "Sub-item 2.1"
            }, {
                title : "Sub-item 2.2"
            }]
        }, {
            title : "Item 3"
        }]
    });
});

Demo: Fiddle

From the doc

isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.

unselectable: false, // Prevent selection.

Jquery Dynatree , only the child node is selectable?

1 Answers