Tuesday, March 4, 2008

Asp.net TreeView state

Don't you ever wanted to preserve the tree status over multiple pages? I searched for many times and found the solution.

  1. use cookies
  2. javascript override functions
  3. TreeView javascript important functions

  1. these script assign a value to cookie:

function getCookieVal (offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie (name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < style="color: rgb(51, 51, 255);">var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function SetCookie (name, value)
{
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name)
{
var exp = new Date();
exp.setTime (exp.getTime() - 1000000000); // This cookie is history (changed -1 to make it previous time)
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}


2-

To override the function in JavaScript, simply define a new variable to hold the old function, and redefine the old function variable as a new function. Here’s the syntax:

var base_TreeView_ToggleNode = TreeView_ToggleNode;

TreeView_ToggleNode = function(data, index, node, lineType, children){

base_TreeView_ToggleNode(data, index, node, lineType, children);

setProfileFolder(data, index,node,children);

return;

}
The setProfileFolder function is our addition to the base method.

see the original reference here.

3- Now you have to see the important functions and concepts about the treeview control

  • TreeView_GetNodeText(node): it takes a node object and returns the node name
believe me it is good, if you want to try to get it by your self you will fail, the structure is so complicated.

  • Facing the similar nodes in text but in different branches:
This is why the index thing exists. The tree view in javascript collect all items in javascript in an array. So, if you have:

Parent
+ child 01
--+child 02
-----leaf

it will be indexed like this

Parent [0]
+ child 01 [1]
--+child 02 [2]
-----leaf [3]

  • you can navigate through the child nodes like this
var childNodes = children.getElementsByTagName("a");
var increment = 0;
for(;incrementvar child_node_name = TreeView_GetNodeText(childNodes[increment]) ;
}


In the server side parse the cookie back and preserve the collapse/expand behaviour.