I've just added the jQuery DynaTree plugin to an ASP.NET MVC project that I'm working on and I thought that I'd do a quick write-up on how I did that using an example page.
Here are the Actions from the Controller:
public ActionResult DynaTree()
{
return View("DynaTree", (object)"1,2,3,4");
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DynaTree(FormCollection collection)
{
string selectedItems = Request.Form["SelectedItems"];
string[] items = selectedItems.Split(',');
return View("DynaTree", (object)selectedItems);
}
The first Action, the GET verb, simple returns the view with a comma separated list of items that we want pre-selected. Interestingly if the second parameter is a string then the overload of the View() function maps that parameter to a master file so you have to cast it to an object to let it know that you're passing in the Model in this param. I could have also set that string in the ViewData collection.
The POST Action pulls the list out of the <input> tag named SelectedItems.
Here are the contents of the <asp:Content> tag in the view:
<% using(Html.BeginForm()) { %>
<div id="tree">
<ul>
<li id="1">First upper item</li>
<li id="2">Second upper item</li>
<li id="3">Third upper item
<ul>
<li id="4">First Lower item in Third layer</li>
<li id="5">Second Lower item in Third layer</li>
</ul>
</li>
<li id="6">Fourth upper item
<ul>
<li id="7">First Lower item in Fourth layer</li>
<li id="8">Second Lower item in Fourth layer</li>
</ul>
</li>
<li id="9">Fifth upper item</li>
</ul>
</div>
<% =Html.Hidden("SelectedItems", Model) %>
<input type="button" name="submit" value="Submit" />
<% } %>
<!-- Also needed are references to the jQuery library. This is in the Site.master file -->
<script src="/Scripts/jquery.dynatree.min.js" type="text/javascript"></script>
<script src="/Scripts/TestDynaTree.js" type="text/javascript"></script>
There's nothing special in here.
The JavaScript that I used with this:
$(document).ready(function() {
$("#tree").dynatree({
onSelect: function(flag, dtnode) {
// This will happen each time a check box is selected/deselected
var selectedNodes = dtnode.tree.getSelectedNodes();
var selectedKeys = $.map(selectedNodes, function(node) {
return node.data.key;
});
// Set the hidden input field's value to the selected items
$('#SelectedItems').val(selectedKeys.join(","));
},
checkbox: true
});
// Remove all of the icons from the tree
$('#tree .ui-dynatree-icon').remove();
// Split out the items listed in the SelectedItems hidden input box
var items = $('#SelectedItems').val().split(',');
var tree = $("#tree").dynatree("getTree");
// Mark each of those items as selected in the tree
for (var i = 0; i < items.length; i++) {
var node = tree.getNodeByKey(items[i]);
node.select(true);
node.activate();
}
});
The node.activate() function will expand the parent node for any child node that you select.
