Russ, the checkboxes are holding their value when another control posts back to the server.
I haven't fully tested the expanding/collasping feature becaues this is not required for my present project. I did experiment with it a little. It appears the checkbox controls the expanded state. Now my tree requires the checkboxes and I did notice there
is a span with with space within the list item so this may be what's causing the expand/collaspe. Again I didn't dive to deep into it.
There is 1 minor change that I made concerning checkboxes in the BuildItem function. I added a label if the treeview has checkbox, if not it outputs the raw text.
if (((item.ShowCheckBox != null) && (item.ShowCheckBox.Value == true)) ||
(treeView.ShowCheckBoxes == TreeNodeTypes.All) ||
((treeView.ShowCheckBoxes == TreeNodeTypes.Leaf) && (!IsExpandable(item))) ||
((treeView.ShowCheckBoxes == TreeNodeTypes.Parent) && (IsExpandable(item))) ||
((treeView.ShowCheckBoxes == TreeNodeTypes.Root) && (item.Depth == 0)))
{
writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("id", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox");
writer.WriteAttribute("name", treeView.UniqueID + "n" + _checkboxIndex.ToString() + "CheckBox");
//Added a javascript attribute to the checkbox this event marks children/parents appropiately
//This would be great if a new property could be added and assigned to so the javascript can be
//dynamically generated.
writer.WriteAttribute("onclick", "SBI_TreeViewCheck(event);");
if (item.Checked)
{
writer.WriteAttribute("checked", "checked");
}
writer.Write(HtmlTextWriter.SelfClosingTagEnd);
// added the following if statement to create label for checkbox
if (item.Text.Length > 0)
{
writer.WriteLine();
writer.WriteBeginTag("label");
writer.WriteAttribute("for", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox");
writer.Write(HtmlTextWriter.TagRightChar);
writer.Write(item.Text);
writer.WriteEndTag("label");
}
//and added code
_checkboxIndex++;
}
//added else to if-checkbox statment and moved the item.Text into it.
//this allows the text to display within a label associated with the checkbox.
//if there is no checkbox then the text is just raw text.
else
writer.Write(item.Text);
I also added an onclick attribute to the checkbox. This event recurses the tree and marks the childern/parents appropiately. here is the javascript:
//globals
var checkedState; //bool
var parentState; //bool
function SBI_TreeViewCheck(e)
{
// obj gives us the node on which check or uncheck operation has performed
var element = e.srcElement || e.target;
parentState = true; //default true;
//checking whether obj consists of checkbox to avoid exceptionif (isCheckBox(element))
{
checkedState = element.checked;
//work our way back to the parent <li> element while (!isListItem(element))
element = element.parentNode;
recurseThroughChildren(element.firstChild); //set child nodes to checkedState
//from the <li> work our way back to the parent <ul> element while (!isList(element))
element = element.parentNode;
recurseThroughParents(element); //set parent nodes accordingly
}
}
function recurseThroughChildren(element)
{
var chkbox;
while(!isNull(element))
{
//mark the child checkbox the same as the parent
chkbox = getCheckBox(element);
if (!isNull(chkbox))
chkbox.checked = checkedState;
//recurse through children of current element
recurseThroughChildren(element.firstChild);
element = element.nextSibling;
}
}
function recurseThroughParents(parent)
{
//if it is an unorderd list, process childrenif(isList(parent))
{
//get all child elements that are list items
var item = parent.getElementsByTagName('LI')[0];
var chkbox;
//foreach list item...while(!isNull(item))
{
//whle the children are not check boxes (only 1 checkbox per list item)
chkbox = getCheckBox(item.firstChild)
if (!isNull(chkbox) && !chkbox.checked)
parentState = false;
item = item.nextSibling;
}
var parentCheckBox = getCheckBox(parent.parentNode);
if (!isNull(parentCheckBox))
parentCheckBox.checked = parentState;
}
if (!isDiv(parent)) //if it is not a div tag countinue to the next parent
recurseThroughParents(parent.parentNode);
}
//return the first checkbox found
function getCheckBox(obj)
{
var ret = null;
while (!isNull(obj))
{
if (isCheckBox(obj))
ret = obj;
else if (obj.childNodes.length > 0)
ret = getCheckBox(obj.firstChild);
if (isCheckBox(ret))
break;
obj = obj.nextSibling;
}
return ret;
}
//helper functions
function isDiv(obj)
{
if (isNull(obj))
return false;
return (obj.tagName == 'DIV');
}
function isCheckBox(obj)
{
if (isNull(obj))
return false;
return (obj.tagName == 'INPUT' && obj.type == 'checkbox');
}
function isList(obj)
{
if (isNull(obj))
return false;
return (obj.tagName == 'UL');
}
function isListItem(obj)
{
if (isNull(obj))
return false;
return (obj.tagName == 'LI');
}
function isNull(obj)
{
return (obj == null);
}
jason_m
Member
283 Points
81 Posts
Re: Treeview expanded state
Sep 13, 2006 02:34 PM|LINK
I haven't fully tested the expanding/collasping feature becaues this is not required for my present project. I did experiment with it a little. It appears the checkbox controls the expanded state. Now my tree requires the checkboxes and I did notice there is a span with with space within the list item so this may be what's causing the expand/collaspe. Again I didn't dive to deep into it.
There is 1 minor change that I made concerning checkboxes in the BuildItem function. I added a label if the treeview has checkbox, if not it outputs the raw text.
if (((item.ShowCheckBox != null) && (item.ShowCheckBox.Value == true)) || (treeView.ShowCheckBoxes == TreeNodeTypes.All) || ((treeView.ShowCheckBoxes == TreeNodeTypes.Leaf) && (!IsExpandable(item))) || ((treeView.ShowCheckBoxes == TreeNodeTypes.Parent) && (IsExpandable(item))) || ((treeView.ShowCheckBoxes == TreeNodeTypes.Root) && (item.Depth == 0))) { writer.WriteBeginTag("input"); writer.WriteAttribute("type", "checkbox"); writer.WriteAttribute("id", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox"); writer.WriteAttribute("name", treeView.UniqueID + "n" + _checkboxIndex.ToString() + "CheckBox"); //Added a javascript attribute to the checkbox this event marks children/parents appropiately //This would be great if a new property could be added and assigned to so the javascript can be //dynamically generated. writer.WriteAttribute("onclick", "SBI_TreeViewCheck(event);"); if (item.Checked) { writer.WriteAttribute("checked", "checked"); } writer.Write(HtmlTextWriter.SelfClosingTagEnd); // added the following if statement to create label for checkbox if (item.Text.Length > 0) { writer.WriteLine(); writer.WriteBeginTag("label"); writer.WriteAttribute("for", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox"); writer.Write(HtmlTextWriter.TagRightChar); writer.Write(item.Text); writer.WriteEndTag("label"); } //and added code _checkboxIndex++; } //added else to if-checkbox statment and moved the item.Text into it. //this allows the text to display within a label associated with the checkbox. //if there is no checkbox then the text is just raw text. else writer.Write(item.Text);I also added an onclick attribute to the checkbox. This event recurses the tree and marks the childern/parents appropiately. here is the javascript:
Treeview "css friendly adapter" checkbox javascript
Programmer
Specialty Bakers, Inc.