May 27, 2008

TreeView - Check All child nodes when checked CheckBox of a Node

Add below javaScript to the aspx page and add the "onclick" html attribute to the TreeView.

TreeView1.Attributes.Add("onclick", "client_OnTreeNodeChecked()");


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

function client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked;
do
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")

var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables = tables.length

if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{ return; }
}

if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{ return; }
}
}
}
}
}
</script>

Expand TreeView on Node Click

There are two ways for doing this:

  1. Causing server side post back:

    Set SelectAction property to SelectExpand for each node

    Node.SelectAction = TreeNodeSelectAction.SelectExpand

  2. Using client side javascript:

    Notice when you move your mouse over the treeview node (+), you will see at the bottom of the browser that it is going to call a javascript method TreeView_ToggleNode. You can use this method in your code to have same functionality.

    Step 1: Get the client id of TreeView:

    String TVClientID = TreeView1.ClientID;



    Step 2: Add the javasript to each node by setting NavigateUrl property. Here initially n=0 for the root node, increment n each time while you add node. [ Its obvious that you do not need this javascript for the leafNode, but still you have to increment n while adding leaf nodes without adding javascript to navigateUrl ]


int n=0;

Node.NavigateUrl = "javascript:TreeView_ToggleNode(" + TClientID + "_Data, " + n.ToString() + "," + TClientID + "n" + n.ToString() + ",' '," + TClientID + "n" + n.ToString() + "Nodes)";


TreeView - Remove Link from the TreeNode

When you have only plain text to display in the TreeView control, you can remove the link from the each node.

Set the SelectAction property to None for each node.

Node.SelectAction = TreeNodeSelectAction.None

May 26, 2008

PostBack on checkbox click in TreeView using JavaScript

As far as I know, there is no event property or method to get postback on Treeview control's checkbox, you can add javascript on click event of checkbox.

Step 1: Copy and paste the following script in the html of your page.

<script language="javascript" type="text/javascript">
function DoPostBack()
{
var ele = window.event.srcElement;
if (ele.tagName == "INPUT" && ele.type == "checkbox")
{
__doPostBack("","");
}
}
</script>


Step 2: Add the "onclick" html attribute of the TreeView control in server side code [i.e in Page_Load event]

TreeView1.Attributes.Add("onclick", "DoPostBack()");

This will make postback when any of checkbox is clicked in TreeView. Now you can write your code like this to handle TreeView's CheckedChanged event.

protected void TreeViewL1_CheckedChanged(object sender, TreeNodeEventArgs e)
{
if (e.Node.Checked == true)
{
// Your code here
}
else
{
// Your code here
}
}

Sys is undefined

While using Microsoft supported ASP.NET AJAX Web Extension along with AJAX Control Toolkit, you might get this script error. This can happen when you forget to add the HttpHandlers in web.config file. Here is the solution.


Add the following httpHandlers between the <system.web> and </system.web>


<httpHandlers>
     <remove verb="*" path="*.asmx"/>
     <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
     <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
validate="false"
/>
</httpHandlers>