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

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

If you can't find an easy way, have you at least tried a hard way? There are many ways to do that. From server's perspective it can be as easy as reading a query string parameter. — Jaroslav Jandek
IMO, the easy way would be to do a POST with Ajax to your server-side script and update the DB. Is there a particular reason why you can't use Ajax? — Nimrod

Moreton Brockley Moreton Brockley · Accepted Answer · 2011-08-11T13:44:01

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

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

2 Answers