Using jQuery Dynatree with checkboxes in ASP.NET (not MVC)

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

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("|");

Why not create a Json string and put it in the hidden variable pass the whole tree back to .net. In .net you may than convert this back to a .net object.

Of course this might give performance issues with large trees.