Question

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.

Answer 1

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>