AaA AaA - 8 days ago 6
Javascript Question

How can I read parent nodes with partly selected child nodes

I'm using dynaTree http://wwwendt.de/tech/dynatree/index.html in my code to show a 2 level tree. this tree is shown in

selectMode = 3
with
checkboxes
and when user check a node checkbox, its parent turns to
gray mode
.

in next stage when user clicks a button I'm sending all selected nodes to server to process.
What I would like to do is send all
gray mode
check boxes as well.

How can I achieve this goal?

Edit:
This is all the code you need

<html>
<head>
<link type="text/css" href="../css/ui.dynatree.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.dynatree.min.js"></script>
<script type="text/javascript">
var treeData = [
{ key: "key1", title: "Text 1" },
{ key: "Key2", title: "Text 2",
children: [
{ key: "Key2_1", title: "Text 2_1" },
{ key: "Key2_2", title: "Text 2_2" },
]
},
];

$(function () {
$("#tree").dynatree({
checkbox: true,
selectMode: 3,
children: treeData,
imagePath: "../images/Tree/",
onSelect: function (select, node) {
var selKeys = $.map(node.tree.getSelectedNodes(), function (node) {
return node.data.key;
});
$('#textField').val(selKeys.join(", "));
}
});
});
</script>
</head>
<body>
<div id="tree"></div>
<input type="text" id="textField" value="" /><input type="button" id="button" onclick="alert($('#textField').val())" value="Send" />
</body>
</html>


When selecting
Key2_1
,
Key2
goes to
gray state
and you'll see
Key2_1
is added to
textField
text box, I would like to have Key2 in
textField
field too.

Note: selecting both child nodes of
Key2_1
and
Key2_2
will also select the parent (key_2) but not when it is in
gray mode

AaA AaA
Answer

It seems dynaTree does not have a method to look for partially selected nodes. An alternative solution is to look for class names of such nodes. by default if the class name for partially selected nodes is not changed, it will be dynatree-partsel, however a node with fully selected children has that class assigned too so we need to select nodes that does not have dynatree-selected in their classes.

A dirty solution will be change onSelect method definition to :

onSelect: function (select, node) {
    var selKeys = $.map(node.tree.getSelectedNodes(), function (node) {
        return node.data.key;
    });
    var partsel = new Array();
    $(".dynatree-partsel:not(.dynatree-selected)").each(function () {
        var node = $.ui.dynatree.getNode(this);
        partsel.push(node.data.key);
    });
    selKeys = selKeys.concat(partsel);
    $('#textField').val(selKeys.join(", "));
}