For my purposes I needed an asynchronous tree-view control that allowed me to selectively include checkboxes and to maintain state across post backs. On the face of it jsTree appeared to tick all of the boxes but off-the-bat I discovered that, although state could be applied through the use of cookies, state couldn’t be applied to the instance of the page and it appeared that checkbox state was a bit of a misnomer.
That said, it is undoubtedly a great plug-in with a lot of potential and certainly with enough potential for me to stick with it. The control that I had in mind was one in which the tree and its nodes would be specified in similar terms to the standard ASP.NET TreeView and then consumed by jsTree using JSON. Finally, the state of the tree and its checkboxes would be maintained in the page.
The final result is a tree-view control that syndicates the sophisticated features of jsTree into a simple and easy to deploy ASP.NET Web Control.
To include this control on your ASP.NET Web Page download the JsTreeView binary or source code from http://code.zyky.com/jsTreeView/, it is available as a .NET 2.0, or a .NET 3.5 binary, depending on your requirement and then install it to the Bin directory of your site.
Add a reference to the control in your page:
<%@ Register assembly="JsTreeView" namespace="Custom.Web.UI.WebControls" tagprefix="custom"%>
As this is a jQuery plug-in you'll need to add a link to the jQuery library within the head tags of your web page:
<head runat="server">
<title>jsTreeView</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Add the control to your page:
<custom:jsTreeView ID="jsTreeView1" runat="server"
ServiceUrl="jsTreeSvc.asmx/GetNodes"
Theme="Default"
CheckBoxes="true"
CssClass="jsTreePanel"></custom:jsTreeView>
You’ll note that I have only covered a small number of the properties available in jsTree (just those that meet my current requirement). To use the control simply populate the ServiceUrl property with a path to your web service, set the theme and use checkboxes as required.
Finally you will need to add a web service to create and return the tree view nodes that jsTree will display. To do this set up an appropriate web service (asmx) page, create a new instance of jsTree to return your nodes and then populate it with your tree nodes:
jsTree tree = new jsTree();
jsTreeNode node1 = new jsTreeNode(treeId, "1", "The Good", "#", true);
tree.Nodes.Add(node1);
return tree.Json();
