ClientSideAsp.Net

Bassistance.de has a great JQuery tree plugin and I thought to make it database driven using Asp.Net and C#. JQuery tree is a highly customizable tree with lot of options available. See the full list of options available with JQuery tree here (see the functions options given in the bottom table)

Click here to see the DEMO and DOWNLOAD the source

Database Schema
For Asp.Net JQuery Tree you can use the same Asp.Net tree DB schema which I explained in my previous post.
Its an N-Level tree and can be stored in a self referencing table (a table with foreign key to the same table). The table will have a PK field ID and an FK field ParentID which will refer to the ID field of same table itself.

Asp.Net Dropdownlist tree DB Schema

Implementation
First select the whole data into a DataTable using the following SELECT query (same as in the case of dropdownlist tree – please read this post for more info)

SELECT TreeNodeID
, ISNULL(ParentNodeID, 0) ParentNodeID
, Title
FROM [dbo].[TreeNode] ORDER BY ParentNodeID, TreeNodeID

Now we will recursively create a string with the tree nodes and display in a literal control.

System.Text.StringBuilder tree = new System.Text.StringBuilder();
string previousParentID = "";
int level = -1;

private void RecursiveFillTree(DataTable dtParent, string parentID)
{
level++; //on the each call level increment 1
DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
if (dv.Count > 0)
{
//loop through each leaf
for (int i = 0; i < dv.Count; i++)
{
//NEW NODE - make a new Unordered list element
if (previousParentID != dv[i]["ParentNodeID"].ToString())
{
if (level == 0) //START THE TREE
tree.Append("n<ul id='ulTree'>");
else
tree.Append("n<ul>");
}
//show the leaf in an li
tree.Append("n<li><a href='?").Append(dv[i]["TreeNodeID"]).Append("'>").Append(dv[i]["Title"]).Append("</a>");
//recusrively show child leafs of the current leaf
RecursiveFillTree(dtParent, dv[i]["TreeNodeID"].ToString());
previousParentID = dv[i]["ParentNodeID"].ToString();
tree.Append("n</li>");
}
tree.Append("n</ul>");
}
}

The above string will be set to a literal defined in the ASPX page.

<asp:Literal ID="litTree" runat="server"></asp:Literal>

You should refer the javascript files jquery-latest.js, jquery.treeview.js and jquery.cookie.js.
Also include the following JavaScript in the head portion of your ASPX

<script type="text/javascript">
$(function() {
$("#ulTree").treeview({
collapsed: false,
animated: "medium",
persist: "location"
});
})
</script>

ulTree is the ID of ul we have created in C#. I have used three properties available with JQuery tree and you can read the details about all the options available here.

Click here to see the DEMO and DOWNLOAD the source

Asynchronous Asp.Net JQuery tree

Asynchronous implementation will be very useful when you have very very big tree and if the loading of all the nodes in HTML affect the page load time.

In that case we can show only the root nodes and when some one click the expand button we can send a request to server and load the child nodes for that root node and so on.

The implementation of Asynchronous Asp.Net JQuery tree is very similar to the normal Asp.Net JQuery tree but in this case we will generate a JSON array object having all the node info and write it to the Response.

In the code behind we can get the Asynchronous call by checking the parameter root . If the parameter value is source the Asynchronous request will be for root nodes. And for all the child nodes we will get the ID in root parameter.

public void AsyncTree()
{
string root = Request.Params["root"];
int parentID = 0;
Tree objTree = new Tree();
//select all the nodes - you can make it more efficient by
//storing the datatable Cache to avoid frequent requests to DB
DataTable dtNodes  = objTree.Select(0);
if (root == "source") //for the first time the JQuery tree will send the root param value as "source"
{
GenerateTree(dtNodes, 0);
}
else if (int.TryParse(root, out parentID)) //subsequent requests will send the ID
{
if (parentID > 0)
{
GenerateTree(dtNodes, parentID);
}
}
}

private void GenerateTree(DataTable dtParent, int parentID)
{
System.Text.StringBuilder tree = new System.Text.StringBuilder();
DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
tree.Append("[");
//loop through each leaf
for (int i = 0; i < dv.Count; i++)
{
tree.Append("{");
tree.Append(""text": "").Append(dv[i]["Title"]).Append("",");
tree.Append(""id": "").Append(dv[i]["TreeNodeID"]).Append("",");

//check whether this node has child nodes
DataView dvChild = new DataView(dtParent);
dvChild.RowFilter = string.Format("ParentNodeID = {0}", dv[i]["TreeNodeID"]);
if (dvChild.Count > 0) //if so mark it in the return node array
tree.Append(""hasChildren": true");
tree.Append("},");
}
//remove the ending comma from the result
if (tree.Length > 1)
{
tree = tree.Remove(tree.Length - 1, 1);
}
tree.Append("]");
//put the result in Response and end the Response
Response.Write(tree.ToString());
Response.End();
}

If a node has child nodes we will set the hasChildren parameter true.
Click here for Asynchronous Asp.Net JQuery tree DEMO and DOWNLOAD the source.