Dynatree - 2 links per node? - dynatree

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>

Answer 2

I noticed that outputting the tree directly allowed me to embed an image tag in the structure as follows -
<div id="tree">
<ul id="treeData" style="display: none;">
#foreach (var provider in Model.Locations)
{
<li class="folder" data="icon: 'false', addClass: 'root-node'">#provider.Provider
<ul>
#foreach (var profession in provider.ChildLocations)
{
<li id="#profession.Id">#profession.Profession <img class="contactsImg" onclick="loadContacts();" src="../../Content/themes/default/images/icons/contacts.png" />
<ul>
#foreach (var formtype in profession.ChildLocations)
{
<li class="folder" id="#formtype.Id" data="addClass: 'progress-bar'">#formtype.Type
<ul>
#foreach (var form in formtype.ChildLocations)
{
<li id="#form.Id" data="addClass: 'progress-bar'">#Ajax.ActionLink(form.Form, "PartialIndex", "FormCover", new { Id = form.formId }, new AjaxOptions { UpdateTargetId = "contentpanel" })
<ul>
#foreach (var lo in form.ChildLocations)
{
<li id="#lo.Id" data="addClass: 'action-required'">#Ajax.ActionLink(lo.Name, "ActualFormTab", new {formid = form.formId, layoutid = lo.formId}, new AjaxOptions{ UpdateTargetId = "contentpanel"})</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
</li>
}
</ul>
</div>
And that, as demonstrated, it was pretty straightforward to add an OnClick event to the image.