Friday, September 14, 2007

How to Select-Unselect and Check-Uncheck TreeView nodes and controls using javascript

How to Select-Unselect and Check-Uncheck TreeView nodes and controls using javascript

In ASP.NET if you have treeview control with check box or other controls and your requirement to select-unselect and check-uncheck all treeview nodes and controls, then I have sample javascript function to achive this.This code is compatable with all browsers (IE,Mozilla,Netscape etc.)

Scree Shot



Source code Design (How to use)

<form id="form1" runat="server">
<div>
<a id="lnkExpandAll" href="javascript:ExpandCollapseAll('tvTest',true)">Expand all</a>
<a id="lnkCollapseAll" href="javascript:ExpandCollapseAll('tvTest',false)">Collapse all</a>
<a id="lnkCheckaAll" href="javascript:CheckUnCheckAll('tvTest',true)">Check all</a><a id="lnkUncheckAll" href="javascript:CheckUnCheckAll('tvTest',false)">UnCheck all</a>
</div>
<asp:TreeView ID="tvTest" runat="server">
<Nodes>
<asp:TreeNode Text="State" Value="State">
<asp:TreeNode Text="M.H" Value="M.H">
<asp:TreeNode ShowCheckBox="True" Text="Pune" Value="Pune"></asp:TreeNode>
<asp:TreeNode ShowCheckBox="True" Text="Mumbai" Value="Mumbai"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="M.P" Value="M.P">
<asp:TreeNode ShowCheckBox="True" Text="Jabalpur" Value="Jabalpur"></asp:TreeNode>
<asp:TreeNode ShowCheckBox="True" Text="Indore" Value="Indore"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="U.P" Value="U.P">
<asp:TreeNode ShowCheckBox="True" Text="Kanpur" Value="Kanpur"></asp:TreeNode>
<asp:TreeNode ShowCheckBox="True" Text="Patna" Value="Patna"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>

JavaScript Code

<script language="javascript" type="text/javascript">

//This function will check and uncheck all check box depends upon mode true/false;
function CheckUnCheckAll(treeViewId,mode)
{
var treeView = document.getElementById(treeViewId);
var treeLinks = treeView.getElementsByTagName("input");

for (var iCounter=0; iCounter< treeLinks.length; iCounter++)
{
if (treeLinks[iCounter].type=="checkbox" && mode)
{
treeLinks[iCounter].checked=true;
}

if (treeLinks[iCounter].type=="checkbox" && !mode)
{
treeLinks[iCounter].checked=false;
}
}
}

//This function will expend/collapse tree node depends upon mode true/false;
function ExpandCollapseAll(treeViewId,mode)
{
var treeView = document.getElementById(treeViewId);
var treeLinks = treeView.getElementsByTagName("a");
var flag = true; var node; var level; var childContainer;

if (mode == true)
mode= 'none';
else
mode ='block';

for(var iCounter=0;iCounter<treeLinks.length;iCounter++)
{
if(treeLinks[iCounter].firstChild.tagName == "IMG")
{
node = treeLinks[iCounter];
level = parseInt(treeLinks[iCounter].id.substr(treeLinks[iCounter].id.length - 1),10);
childContainer = document.getElementById(treeLinks[iCounter].id + "Nodes");

if(flag)
{
if(childContainer.style.display == mode)
{
TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'',childContainer);
//CheckUnCheckAll(treeViewId,mode);

}
flag = false;
}
else
{
if(childContainer.style.display == mode)
{
TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'',childContainer);
//CheckUnCheckAll(treeViewId,mode);
}
}
}
}
}

</script>

Tuesday, September 11, 2007

How to Maintain Tree view state after page post back in ASP.NET 2.0

How to Maintain Tree view state after page post back in ASP.NET 2.0
In the web application if page get post back then it's very difficult to maintain tree view previous state. I am giving one sample code in C#.net to maintain tree view state when page get post back.
Here we can save tree view state into List control and Restore saved state when page again get post back or user clicks F5/refresh.
//to saves tree view state
private void SaveTreeViewState(TreeNodeCollection nodes, List<string> list)
{
Session["TreeViewState"] = null;
// Recursivley record all expanded nodes in the List.
foreach (TreeNode node in nodes)
{
if (node.ChildNodes != null)
{
if (node.Expanded.HasValue && node.Expanded == true
&& !String.IsNullOrEmpty(node.Text))
{
list.Add(node.Text);
}
if (node.ShowCheckBox == true
&& node.ChildNodes.Count == 0
&& node.Parent.Expanded == true)
{
if (node.Checked == true)
list.Add(node.ValuePath + "-T");
else
list.Add(node.ValuePath + "-F");
}
SaveTreeViewState(node.ChildNodes, list);
}
}
}
//to Restore treeview state after postback
private void RestoreTreeViewState(TreeNodeCollection nodes, List<string> list)
{
foreach (TreeNode node in nodes)
{
// Restore the state of one node.
if (list.Contains(node.Text)
list.Contains(node.ValuePath + "-T")
list.Contains(node.ValuePath + "-F"))
{
if (node.ChildNodes != null && node.ChildNodes.Count != 0
&& node.Expanded.HasValue
&& node.Expanded == false)
{
if (node.Parent != null)
{
if (list.Contains(node.ChildNodes[0].ValuePath + "T")
list.Contains(node.ChildNodes[0].ValuePath + "-F"))
node.Expand();
}
else
{
node.Expand();
}
}
else if (node.ChildNodes != null && node.Expanded.HasValue
&& node.Expanded == false)
{
if (node.ShowCheckBox == true && list.Contains(node.Parent.Text)
&& list.Contains(node.Parent.Parent.Text))
{
if (list.IndexOf(node.ValuePath + "-T") != -1)
{
node.Checked = true;
}
else if (list.IndexOf(node.ValuePath + "-F") != -1)
{
node.Checked = false;
}
}
}
}
else
{
if (node.ChildNodes != null && node.ChildNodes.Count != 0
&& node.Expanded.HasValue
&& node.Expanded == true)
node.Collapse();
}
// If the node has child nodes,restore their state, too.
if (node.ChildNodes != null && node.ChildNodes.Count != 0)
RestoreTreeViewState(node.ChildNodes, list);
}
}
How to Use
//You can use this in pageload event
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["TreeViewState"] != null)
{
//Call method to restore tree view state
List<string> list = (List<string>)Session["TreeViewState"];
RestoreTreeViewState(tvFamilyModels.Nodes, list);
}
}
else
{
//Record the TreeView's current expand/collapse state.
List<string> list = new List<string>(100);
SaveTreeViewState(tvFamilyModels.Nodes, list);
Session["TreeViewState"] = list;
}
}