Dynatree.js how to get node selected in html using dyna.js

Question

Im working on html form and I have used dynatree for select and multi-select as per requirement of the project. What I need to do is to make a edit form where user gets all the fields filled from database. Which means i need to show a user a dynatree with already selected fields. Here is my example code :

<span  id="action" name="action">
  <ul>
       <li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
      <ul>    
        <li id="allow" title="optional">allow           
        <li id="deny" title="optional">deny
        <li id="pass" title="optional" class="selected" >pass           
        <li id="block" title="optional">block
        <li id="redirect" title="optional">redirect                         

     </ul>
   </ul>
</span>

Java script :

$("#action").dynatree({
        classNames: {
            container: "action-container",
            checkbox: "dynatree-radio"
        },
        selectMode: 3,
        onSelect: function(select, node) {
            var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
                return node.data.key;
            });
            $("#selectedAction").val(selKeys.join(","));
                var selRootNodes = node.tree.getSelectedNodes(true);
                var selRootKeys = $.map(selRootNodes, function(node){
                    return node.data.key;
                });
        }           
    });

In above mentioned html even though Im using class = "selected" with an li element but its still not showing it as selected on UI. Thanks in advance.

score 2 · Answer 1 · answered Apr 29 '13 at 20:00

Dynatree creates its own elements when initializing, and throughout the lifetime of the tree. Therefore, the li elements that you are adding are not the li elements of the tree.

Take a look at this documentation, under the section "Node Options". You'll see that you can add a class like so:

<div id="tree">
<ul>
  <li id="DisruptiveAction" class="folder expanded">DisruptiveAction (5)
  <ul>    
    <li id="allow" title="optional">allow           
    <li id="deny" title="optional">deny
    <li id="pass" title="optional" data="addClass: 'dynatree-selected'" >pass           
    <li id="block" title="optional">block
    <li id="redirect" title="optional">redirect                         
 </ul>

That is generic code for adding a class. There might a more specific way of specifying that an element is selected, as it is a core dynatree concept, rather than a user-defined class.

Dynatree.js how to get node selected in html using dyna.js

1 Answers1