Dynatree - 2 links per node?

0
votes

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.

2
dynatree
show your code , and anyway , you can always place your own html elements and respond to their event to do you logic... just don't rely on OnActivate for that – Daniel
I don't see how showing my code - which is a normal Dynatree with an OnActivate function and a SPAN inside the LI tag is going to make any difference. Further, DynaTree suppresses OnClick and most other elevemnt events. – Rich Bryant
one way jsfiddle.net/vedmack/LcQkp added two elements with two different onclick callbacks... How showing your code could help ? one might modify it a bit with a kick start example... – Daniel

2 Answers

2
votes

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>
0
votes

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 &nbsp;<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.