Mahmoud ElMansy: knowledge meant to be free

Dynatree Lazy Load Example With

I faced issue on my work we use jquery Dynatreeat one of our projects and for performance issue i decide to use the lazy load feature that comes with Dynatree Plugin ,but i found no example in to how to achieve this.

So i made an example and will go in details how to make it up and running.

First : here is a link for And plugins.jquery

And final link Plugin Homepage

And now my favorite part.

Second : We will make web site add page and add new aspx webpage call it “Dynatree.aspx” we will reference.

    <link href="CSS/Jquery.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="/Scripts/ui.core.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.dynatree.js" type="text/javascript"></script>

Third: in the page code behind file put this method.

/// Function get Tree leaves

//this part is important to make asp convert result to json for us
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public static List GetNodes(string key)

List lstDynaTreeNodes= new List();
string NodeTitle = "Tree Node ";
//First State Meanes load the first Row of the tree
if (key=="0")
//load data for intial the tree firt row of data
// load data (the sub items) for the given tree branch
int NodeNum;
for (int i = 1; i &lt;= 5; i++)
NodeNum = new Random().Next(i, i * 20);
new DynaTreeNode()
isFolder = true,
isLazy = true,
key = NodeNum.ToString(),
Title = NodeTitle + NodeNum.ToString()

return lstDynaTreeNodes;

Fourth : Now to the ajax call the will initiate the tree and get data.

// --- Initialize the sample tree
title: "Lazy Tree",
rootVisible: true,
fx: { height: "toggle", duration: 300 },
initAjax: {
type: 'POST',
url: "/Dynatree.aspx/getnodes",
data: JSON.stringify({ key: '0' }),
dataType: "json",
contentType: 'application/json; charset=utf-8'


onActivate: function (dtnode) {
, onLazyRead: function (dtnode) {
type: 'POST',
url: "/Dynatree.aspx/getnodes",
data: JSON.stringify({ key: }),
dataType: "json",
contentType: 'application/json; charset=utf-8'


That is it you will have you lazy load Tree you can download
Full Example and enjoy the code