Tuesday, November 27, 2007

JavaScript - TreeView

Find the below code to select the node under the parent.

 

This code has been tested and working very well.

 

Bala, please check is this code works with Ajax, we are calling the SelectTreeNodes javascript function.

 

 

 

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile ="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Import Namespace="System.Collections.Generic " %>

<html xmlns=" http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title >Untitled Page</title >

   

<script language="javascript">

 

function SelectTreeNodes()

{

 

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 >

 

 

   

</head >

<body >

    <form id="form1" runat ="server">

    <div >

        <asp :TreeView ID="TreeView1" Height="319px" onclick ="SelectTreeNodes()" runat="server"

            ShowCheckBoxes="All" ShowLines="True" Width ="349px">

            <Nodes >

                <asp :TreeNode Text="New Node" Value="New Node">

                    <asp :TreeNode Text="New Node" Value="New Node">

                        <asp :TreeNode Text ="New Node" Value="New Node"></ asp:TreeNode>

                        <asp :TreeNode Text ="New Node" Value="New Node">

                            <asp :TreeNode Text ="New Node" Value="New Node"></ asp:TreeNode>

                        </asp :TreeNode>

                    </asp :TreeNode>

                    <asp :TreeNode Text="New Node" Value="New Node">

                        <asp :TreeNode Text ="New Node" Value="New Node"></ asp:TreeNode>

                    </asp :TreeNode>

                </asp :TreeNode>

                <asp :TreeNode Text="New Node" Value="New Node"></asp :TreeNode>

                <asp :TreeNode Text="New Node" Value="New Node"></asp :TreeNode>

                <asp :TreeNode Text="New Node" Value="New Node"></asp :TreeNode>

            </Nodes >

        </asp :TreeView>

   

    </div >

    </form >

</body >

</html >

 

 

 

0 comments: