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.
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 <= 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;
}
/// 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 <= 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'
});
}
});
$("#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
My name is Mahmoud El Mansy I'm C# Senior solution developer .
Thank you Mahmoud,
Your example put me on track.
I’m working with PHP/MySQL and had to adapt a little your example for it to work. For each query, the children nodes are extracted from MySQL to a PHP array.
The changes I had to do for the script to work were :
1) removing the JSON.stringify() around the { … } sandwiches
2) removing the contentType: … lines
3) using json_encode() PHP function to convert the PHP array into a JSON list.
The isFolder option is also unecessary in my case, as I prefer a document icon than a folder one for categories.
Currently, I’m doing the ajax request to call the children nodes from within onActivate instead of onLazyread. The tree works without that I need isLasy being set to true.
The subnodes are called by this SQL query:
$req = “SELECT name AS title,id AS ‘key’, isparent AS isFolder FROM `”.$database[‘prefix’].”productcategories` WHERE parent=”.$_POST[‘key’];
“isparent” is a BOOLEAN field storing if the node is itself a parent category (i.e. a branch) or a leaf (without children).
Issues to which I could not find an answer to are :
1) How can one display the [+] left to the category if it is a parent, basing on the “isparent” field. Currently, this sign appears only on “onActivate”, that is when the node is clicked.
2) In your example, with the isLasy property set to true, is the onLasyRead event automatically triggered when a parent node is clicked?
If yes, can isLasy be set to true for the whole site, so that I don’t have to alter my PHP array ?
If not, how do you trigger the onLasyRead event ?
3) How to avoid “Load error! (parsererror)” when the clicked node is a leaf node without any children node, i.e. how to avoid requesting children nodes when in my database the value of “isparent” is 0 (false).
I hope we can share some tricks we find out about Dynatree.
Cheers
Hi again,
As a partial answer to aforementioned issues 1 and 2, setting the isLazy property to true (or to 1) for the node makes that onLazyRead can be used instead of onActivate to load the child nodes, and that the expansion icons will display.
A blue “diamond” sign is diplayed instead of a [+] sign for the nodes whose children nodes were not retrieved yet. (I would prefer a [+] sign however.)
Example query:
$req = “SELECT name AS title,id AS ‘key’, isparent AS isLazy FROM `”.$database[‘prefix’].”productcategories` WHERE parent=”.$_POST[‘key’];