Dynatree - Sample

Custom clickable icon

by Charly Oh

HTML

<link rel="stylesheet" href="http://wwwendt.de/tech/dynatree/src/skin-vista/ui.dynatree.css">
<script src="http://wwwendt.de/tech/dynatree/src/jquery.dynatree.js"></script>
11<div id="tree"> </div>
22<div id="info"></div>

CSS

span.dynatree-icon.dynatree-edit-icon
{
    //border: 1px solid red;
    background-position: 0 -112;
}

JavaScript

$(function(){
    // Variant 1:
    $("span.dynatree-edit-icon").live("click", function(e){
        alert("Edit " + $.ui.dynatree.getNode(e.target));
    });
    $("#tree").dynatree({
    checkbox: true,
        selectMode: 3,
      onActivate: function(node) {
        $("#info").text("You activated " + node);
      },
        onCustomRender: function(node) {
				var cols = node.data.key;
        var html = node.data.title;
        if(node.data.key == "2" || node.data.key == "1" ){
          html += "<span class='td'> all <input type='radio' name='"+node.data.title+"' value='0'/> owner <input type='radio' name='"+node.data.title+"' value='1'/></span>";
        }
        return html;
        
			},
        // Variant 2:
        onClick: function(node, e){
            if($(e.target).hasClass("dynatree-edit-icon")){
                $("#info").text("You clicked " + node + ",  url=" + node.url);
            }
        },
        debugLevel: 2, // 0:quiet, 1:normal, 2:debug,
        
      children: [
  {
    "title": "db",
    "key": "10",
    "isFolder": true,
    "hideCheckbox": false,
    "children": [
      {
        "title": "st",
        "key": "20",
        "isFolder": true,
        "hideCheckbox": false,
        "children": [
          {
            "title": "r",
            "key": "2",
            "hideCheckbox": false,
            "select": false
          },
          {
            "title": "w",
            "key": "1",
            "hideCheckbox": false,
            "select": true
          }
        ],
        "select": true
      }
    ],
    "select": true
  }
]
    });
});