Question

Right now I am using a ASP.NET TreeView with checkboxes enabled in my page, and I dynamically populate the tree in the C# code behind by using node values to store id’s obtained from the db. On postback, I iterate through the nodes and get the checked ones and store back in the db.

To get tri-state checkboxes(not possible in the ASP.NET TreeView), I want to move to a jQuery Treeview. The most promising one seems to be Dynatree at http://wwwendt.de/tech/dynatree/doc/samples.html (click persistence on the left.)

Is there some other free ASP.NET Treeview with checkboxes that can be used?

To populate the dynatree, I am thinking of writing UL and LI elements to a ASP.NET LiteralControl and then configuring Dynatree in the html to populate the tree with that DIV. Is this the best way? Do I put the node id in the li id as it’s suggested in the docs so that I can read it back at the backend?

However, I am not able to find an easy way to read the values back in the codebehind to store in the db..
i.e how to see if a checkbox node was checked in the C# code?
The docs say this:
// Get a JavaScript object copy of the tree
var dict = $(“#tree”).dynatree(“getTree”).toDict();
// … then use Ajax to send this to your server…

Can it be seen in the postback button click event somehow without using ajax, use hidden asp.net controls and read it in the postback?

Documentation is here http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

Answer 1

One way round it is setting a hidden field to be a string containing all the selected ids delimited by a chosen character. On postback you can then process this by splitting the string using the delimiter to get an array of ids to update.

Initialize the tree with a javascript section similar to:

$("#tree").dynatree({
        title: "Title",
        checkbox: true,
        selectMode: 2,
        onSelect: function() {
            var tree = $("#tree").dynatree("getTree");
            var selKeys = $.map(tree.getSelectedNodes(), function(node){
                return node.data.key;
            });
            document.getElementById("<%= hiddenfieldname.ClientID %>").value = selKeys.join("|");
        }
    });

Then some C# along the lines of:

var objectIds = hiddenfieldname.Value.Split("|");