I tried to implements a client-side function, but I can't achieve. I'm not a guru programmer, but I'm trying to migrate to VWG framework. I would like to implement the logic with treeview control, when a user click on a parent node all child become checked. If at least one child node is check, then the parent must be checked. I already achieve this using asp.net treeview control and usign a JavaScript function, because I want to void the server round trip. Using the steps posted by Ori,I tried to do it, buy I couldn't, I did this:
1. I create a .js file
// JScript source code for tvJavaScript control
// <script language="javascript" type="text/javascript">
//************************** Treeview Parent-Child check behaviour ****************************//
function
tvJavaScript_OnTreeClick(evt) {var src = window.event != window.undefined ? window.event.srcElement : evt.target;var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");if (isChkBoxClick) {var parentTable = tvJavaScript_GetParentByTagName("table", src);var nxtSibling = parentTable.nextSibling;if (nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
{
if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
{
//check or uncheck children at all levels
tvJavaScript_CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
tvJavaScript_CheckUncheckParents(src, src.checked);
}
}
function
childChkBoxes[i].checked = check;
}
}
tvJavaScript_CheckUncheckChildren(childContainer, check) {var childChkBoxes = childContainer.getElementsByTagName("input");var childChkBoxCount = childChkBoxes.length;for (var i = 0; i < childChkBoxCount; i++) {
function
tvJavaScript_CheckUncheckParents(srcChild, check) {var parentDiv = tvJavaScript_GetParentByTagName("div", srcChild);var parentNodeTable = parentDiv.previousSibling;if (parentNodeTable) {var checkUncheckSwitch;if (check) //checkbox checked
{
// Seccion original, que check el padre si todos los hijos estan
// seleccionados unicamente, en mi caso yo deseaba
// checkear el padre si al menos un hijo estaba chequedado
// var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
//if(isAllSiblingsChecked)
// checkUncheckSwitch = true;
// else
// return; //do not need to check parent if any (one or more) child not checked
checkUncheckSwitch =
var isASiblingsChecked = tvJavaScript_AreASiblingChecked(srcChild)if (isASiblingsChecked)true;else
}
return;else //checkbox unchecked
{
// linea siguiente era la unica originalmente
// checkUncheckSwitch = false;
checkUncheckSwitch =
var isASiblingsChecked = tvJavaScript_AreASiblingChecked(srcChild)if (isASiblingsChecked)true;else
checkUncheckSwitch =
}
parentNodeChkBox.checked = checkUncheckSwitch;
false;var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");if (inpElemsInParentTable.length > 0) {var parentNodeChkBox = inpElemsInParentTable[0];//do the same recursively
tvJavaScript_CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function
tvJavaScript_AreAllSiblingsChecked(chkBox) {var parentDiv = tvJavaScript_GetParentByTagName("div", chkBox);var childCount = parentDiv.childNodes.length;for (var i = 0; i < childCount; i++) {if (parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
{
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];//if any of sibling nodes are not checked, return false
}
}
}
}
}
if (!prevChkBox.checked) {return false;return true;
function
tvJavaScript_AreASiblingChecked(chkBox) {var parentDiv = tvJavaScript_GetParentByTagName("div", chkBox);var childCount = parentDiv.childNodes.length;for (var i = 0; i < childCount; i++) {if (parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
{
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];//if any of sibling nodes are not checked, return false
}
}
}
}
}
if (prevChkBox.checked) {return true;return false;
//utility function to get the container of an element by tagname
function
parent = parent.parentNode;
}
}
tvJavaScript_GetParentByTagName(parentTagName, childElementObj) {var parent = childElementObj.parentNode;while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {return parent;
///////////////////////////////////////////////////////////////////////////////////////
// </script>
2. I create a CustomTreeView (only the .cs and the .xslt files), and I copied the content of TreeView.xslt to my CustomTreeView.xslt file, and I tried to add my event handler like this:
<
<
<
<
<
</
<
<
</
</
</
</
xsl:if test="$prmCheckBoxes and @Attr.CheckBoxes='1'">td class="TreeView-CheckBox" onclick="mobjApp.Events_FireEvent({@Id},'tvJavaScript_OnTreeClick',true)" >xsl:choose>xsl:when test="@Attr.Checked='1'" >img src="Skins.CheckBox1.gif.wgx" style="margin-{$right}:2px"/>xsl:when>xsl:otherwise>img src="Skins.CheckBox0.gif.wgx" style="margin-{$right}:2px"/>xsl:otherwise>xsl:choose>td>xsl:if>
3. I've created a Container Panel, my file is named tvContainerPanel (I have only th tvContainerPanel.cs), and I added the following code:
protected
{
override void FireEvent(IEvent objEvent)//If the control is hidden or disabled
//don't fire it's events
{
{
OnTreeClick();
if (this.Visible && this.Enabled)switch (objEvent.Type)case "tvJavaScript_OnTreeClick":break;//default:
// base.FireEvent(objEvent);
// break;
}
}
}
base.FireEvent(objEvent);
. . . . . and I'm here, I can't figure out how do it . . . ., I just want call the JavaScript function tvJavaScript_OnTreeClick from the client side, this function call the others JavaScripts functions that help me to achieve what I described at the beginning. I would appreciate any help.