Mahmoud ElMansy: knowledge meant to be free

Dynatree Lazy Load Example With asp.net

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 asp.net 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 code.google And plugins.jquery

And final link Plugin Homepage

And now my favorite part.

Second : We will make asp.net 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
///

//////
[System.Web.Services.WebMethod]
//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
}
else
{
// 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);
lstDynaTreeNodes.Add(
new DynaTreeNode()
{
isFolder = true,
isLazy = true,
key = NodeNum.ToString(),
Title = NodeTitle + NodeNum.ToString()
}<strong>
);
}

return lstDynaTreeNodes;
}

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

// --- Initialize the sample tree
$("#tree").dynatree({
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) {
$("#divCurrent").text(dtnode.data.title);
}
, onLazyRead: function (dtnode) {
dtnode.appendAjax({
type: 'POST',
url: "/Dynatree.aspx/getnodes",
data: JSON.stringify({ key: dtnode.data.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