Guy Ellis Rocks

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.