MS TreeView - child checkbox items still checked after parent hasbeen unchecked

  • Thread starter Thread starter brendan_gallagher_2001
  • Start date Start date
B

brendan_gallagher_2001

Hi

I have inherited an app that uses a MS TreeView
(System.Web.UI.WebControls.TreeView).
In the app, there is a MS TreeView that has three levels (see below),
that I will refer to as Level1, Level2 and Level3. First is Level1,
then the level below that is Level2, which can be expanded to expose
multiple checkboxed items at Level3.

Problem:
When I load the web app and select the Level1 checkbox, and expand the
level1 tree, I find that the items at all levels below, are checked as
they should be, and this is fine. However, when I uncheck the level1
checkbox, the tree node collapses, and when I expand the Level1 node
again I find that the items at level2 and level3 are still checked,
though they should not be because I unchecked the checkbox at level1.
Extra info: the tree view is in a AJAX update panel with
'UpdateMode="Conditional'.


Any help with this would be greatly appreciated.

- Level1
-Level2
Level3Item1
Level3Item2
Level3Item3
Level3ItemN

-Level2
Level3Item1
Level3Item2
Level3Item3
Level3ItemN



Aspx code for the tvTreeView:

<asp:TreeView id="tvTreeView" onclick="client_OnTreeNodeChecked()"
runat="server" Height="99%" ForeColor="black"
BackColor="white"
OnSelectedNodeChanged="tvTreeView_SelectedNodeChanged"
Target="_self"
ExpandDepth="0" ShowExpandCollapse="true"
OnTreeNodePopulate="tvTreeView_DemandLoad"
PopulateNodesFromClient="true"
EnableClientScript="true" Font-Names="Microsoft Sans Serif"
Font-Size="8pt"
ShowCheckBoxes="All" __designer:wfdid="w2">
</asp:TreeView>


C# event for TreeView:
protected void tvTreeView_SelectedNodeChanged(object sender, EventArgs
e)
{

}



JavaScript client_OnTreeNodeChecked code:

function client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var inputElement = obj;
var treeNodeFound = false;
var checkedState;


if (obj.tagName == "INPUT" && obj.type == "checkbox")
{

// first check if the node has child nodes
var treeNode = obj;
checkedState = treeNode.checked;

do
{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE")

// parentTreeLevel = 2 => at the parent node level,
e.g. Compiler, so we want
// to expand this node.
var parentTreeLevel = obj.rows[0].cells.length;

// when the user checks one of the parent nodes => we
should populate the child nodes
// for this node => use the javascript from that
node's "href" property to call "BuildNode"
// on the server.

// if we are at the parent node level AND there are no
child nodes (node hasn't
// been expanded yet

if (parentTreeLevel == 2 && obj.nextSibling == null &&
obj.previousSibling != null && obj.tagName == "TABLE")
{
// we are forcing a "click" on the "expand button"
- which goes to the server
// to build the node

inputElement.parentElement.previousSibling.firstChild.click();
}

else if(parentTreeLevel == 2 && obj.nextSibling !=
"DIV")
{
// we are forcing a "click" on the "expand button"
- which goes to the server
// to build the node

inputElement.parentElement.previousSibling.firstChild.click();
}
else if ((parentTreeLevel == 2 || parentTreeLevel ==
4) && obj.nextSibling.tagName == "DIV") // select/deselect ALL
{
// NB - write check here to see if node has
childnodes but is collapsed => expand
var objDiv = obj.nextSibling;

if(objDiv.style.display == 'none')
objDiv.style.display = 'block'; // expand the
node


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 == obj)
{
treeNodeFound = true;i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel =
tables.rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell =
tables.rows[0].cells[childTreeLevel - 1];
var inputs =
cell.getElementsByTagName("INPUT");

// set to the same as the parent
node
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
}
 
Hi

I have inherited an app that uses a MS TreeView
(System.Web.UI.WebControls.TreeView).
In the app, there is a MS TreeView that has three levels (see below),
that I will refer to as Level1, Level2 and Level3. First is Level1,
then the level below that is Level2, which can be expanded to expose
multiple checkboxed items at Level3.

Problem:
When I load the web app and select the Level1 checkbox, and expand the
level1 tree, I find that the items at all levels below, are checked as
they should be, and this is fine.  However, when I uncheck the level1
checkbox, the tree node collapses, and when I expand the Level1 node
again I find that the items at level2 and level3 are still checked,
though they should not be because I unchecked the checkbox at level1.
Extra info: the tree view is in a AJAX update panel with
'UpdateMode="Conditional'.

Any help with this would be greatly appreciated.

- Level1
        -Level2
                Level3Item1
                Level3Item2
                Level3Item3
                Level3ItemN

        -Level2
                Level3Item1
                Level3Item2
                Level3Item3
                Level3ItemN

Aspx code for the tvTreeView:

<asp:TreeView id="tvTreeView" onclick="client_OnTreeNodeChecked()"
        runat="server" Height="99%" ForeColor="black"
BackColor="white"
        OnSelectedNodeChanged="tvTreeView_SelectedNodeChanged"
Target="_self"
        ExpandDepth="0" ShowExpandCollapse="true"
        OnTreeNodePopulate="tvTreeView_DemandLoad"
PopulateNodesFromClient="true"
        EnableClientScript="true" Font-Names="Microsoft Sans Serif"
Font-Size="8pt"
        ShowCheckBoxes="All" __designer:wfdid="w2">
</asp:TreeView>

C# event for TreeView:
protected void tvTreeView_SelectedNodeChanged(object sender, EventArgs
e)
        {

        }

JavaScript client_OnTreeNodeChecked code:

        function client_OnTreeNodeChecked()
        {
            var obj = window.event.srcElement;
            var inputElement = obj;
            var treeNodeFound = false;
            var checkedState;

            if (obj.tagName == "INPUT" && obj.type =="checkbox")
            {

                // first check if the node has child nodes
                var treeNode = obj;
                checkedState = treeNode.checked;

                do
                {
                    obj = obj.parentElement;
                }
                while (obj.tagName != "TABLE")

                // parentTreeLevel = 2 => at the parent node level,
e.g. Compiler, so we want
                // to expand this node.
                var parentTreeLevel = obj.rows[0].cells..length;

                // when the user checks one of the parentnodes => we
should populate the child nodes
                // for this node => use the javascript from that
node's "href" property to call "BuildNode"
                // on the server.

                // if we are at the parent node level ANDthere are no
child nodes (node hasn't
                // been expanded yet

                if (parentTreeLevel == 2 && obj.nextSibling == null &&
obj.previousSibling != null && obj.tagName == "TABLE")
                {
                    // we are forcing a "click" on the "expand button"
- which goes to the server
                    // to build the node

inputElement.parentElement.previousSibling.firstChild.click();
                }

                else if(parentTreeLevel == 2 && obj.nextSibling !=
"DIV")
                {
                    // we are forcing a "click" on the "expand button"
- which goes to the server
                    // to build the node

inputElement.parentElement.previousSibling.firstChild.click();
                }
                else if ((parentTreeLevel == 2 || parentTreeLevel ==
4) && obj.nextSibling.tagName == "DIV")   // select/deselect ALL
                {
                    // NB - write check here to see if node has
childnodes but is collapsed => expand
                    var objDiv = obj.nextSibling;

                    if(objDiv.style.display == 'none')
                        objDiv.style.display = 'block'; // expand the
node

                    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 == obj)
                            {
                                treeNodeFound = true;i++;
                                if (i == numTables)
                                {
                                    return;
                                }
                             }
                             if (treeNodeFound == true)
                             {
                                var childTreeLevel =
tables.rows[0].cells.length;
                                if (childTreeLevel > parentTreeLevel)
                                {
                                    var cell =
tables.rows[0].cells[childTreeLevel - 1];
                                    var inputs =
cell.getElementsByTagName("INPUT");

                                    // set to the same as the parent
node
                                    inputs[0].checked = checkedState;
                                 }
                                 else
                                 {
                                    return;
                                 }
                             }
                        }
                    }
                }
            }
        }
Click to expand...


Actually...I just took another look at this and resolved it
myself...issue closed.
 
Back
Top