Search code examples
dynatree

Dynatree - 2 links per node?


Does anyone know if it's possible to make the DynaTree jquery plugin handle two HREF links per node?

I have one link working fine but I'm also looking at a request to display a "contacts" image on the right-hand side of each clickable node which, when clicked produces a popup (I know, not my design) of other users working on the same item.

I can display the image fairly easily using a SPAN tag but since the existing HREF is the one trapped by OnActivate, I'm having real trouble making it do anything.

All advice welcomed.


Solution

  • I discovered a better way.

    <script type="text/javascript">
         $(function () {
             $("#tree").dynatree({
                 initAjax: {
                     type: "POST", 
                     url: "TreeView/GetNodes"
    
                    // This gets data from an MVC3 controller
                    // in the form of a serialised list of nodes
                   // with custom attributes.
    
                 },
                 //here's the meat of it - 
                 // elements are created and added 
                 // according to the custom data values in the node
    
                 onRender: function (node, nodeSpan) {
                     if (node.data.hasPostImage) {
                         var postImg = document.createElement('img');
                         postImg.setAttribute('src', node.data.postImageUrl);
                         postImg.setAttribute('class', node.data.postImageClass);
                         postImg.setAttribute('alt', node.data.postImageAltText);
                         postImg.setAttribute('onClick', 'javascript:loadContacts(\'' + node.data.postImageScriptHref + '\');');
    
                         // the element is then appended to the Anchor tag (title)
                         // using jquery.after.
    
                         // it works really well, except for IE7.  Working on that now.
    
                         $(nodeSpan).find('.dynatree-title').after(postImg);
                     }
                 },
                 onClick: function (node) {
                 node.toggleExpand();
                 }
             });
         });    
      </script>