iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi,
Here is an example that explain this feature. When I checked the CheckBox Of the node, the node will automatically expand, checked his child nodes, run the NodeCheckedChanged event, if the child node has child nodes, also automatically expand. All the nodes are loaded dynamically.
example click me
How can i achieve this feature with WebTreeView?
Thanks!
Use the following code to solve this problem.
m13931: function (vba275, v06d20, v7e33) { if (vba275.Get("ShowCheckBox") == "Yes") { wt57e67.me2f57(vba275, "CheckedState"); var v6ef39 = ISGetObject(vba275.ControlId); var v66050 = vba275.GetElementCheckBox().children[0]; if (v6ef39.EnableTriStateCheckBox) { if (vba275.Checked) { var vb8c85 = false; switch (vba275.Get("NodeType")) { case "Root": vb8c85 = vba275.Get("Nodes").length > 0; break; case "Parent": vb8c85 = true; break; case "Leaf": vb8c85 = false; break; } if (vb8c85 == true) { switch (vba275.CheckedState) { case "Checked": v66050.src = v6ef39.CheckBoxType == "UseStandard" ? v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, "wt_indeterminate.gif") : v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxPartialImage); wt57e67.mdb551(vba275, "CheckedState", "Indeterminate"); v6ef39.AddCheckedNode(vba275); break; case "UnChecked": v66050.src = v6ef39.CheckBoxType == "UseStandard" ? v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, "wt_checked.gif") : v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxTrueImage); wt57e67.mdb551(vba275, "CheckedState", "Checked"); v6ef39.AddCheckedNode(vba275); break; case "Indeterminate": v66050.src = v6ef39.CheckBoxType == "UseStandard" ? v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, "wt_unchecked.gif") : v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxFalseImage); wt57e67.mdb551(vba275, "CheckedState", "UnChecked"); v6ef39.RemoveCheckedNode(vba275); break; } } else { v66050.src = v6ef39.CheckBoxType == "UseStandard" ? v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, "wt_checked.gif") : v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxTrueImage); wt57e67.mdb551(vba275, "CheckedState", "Checked"); v6ef39.AddCheckedNode(vba275); } } else { v66050.src = v6ef39.CheckBoxType == "UseStandard" ? v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, "wt_unchecked.gif") : v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxFalseImage); wt57e67.mdb551(vba275, "CheckedState", "UnChecked"); v6ef39.RemoveCheckedNode(vba275); } if (v7e33 != true) wt57e67.me9387(vba275); } else { if (vba275.Checked) { if (v6ef39.CheckBoxType == "UseStandard") { if (window.event == null || (window.event.srcElement != null && window.event.srcElement != v66050)) v66050.checked = true; } else v66050.src = v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxTrueImage); wt57e67.mdb551(vba275, "CheckedState", "Checked"); v6ef39.AddCheckedNode(vba275); } else { if (v6ef39.CheckBoxType == "UseStandard") { if (window.event == null || (window.event.srcElement != null && window.event.srcElement != v66050)) v66050.checked = false; } else v66050.src = v6ef39.ResolveImagePath(v6ef39.ImagesDirectory, v6ef39.ImagesSettings.CheckBoxFalseImage); wt57e67.mdb551(vba275, "CheckedState", "UnChecked"); v6ef39.RemoveCheckedNode(vba275); } } if (v6ef39.ExpandWhenCheckedChanged && vba275.ChildNodeExpandable && vba275.GetNodes().length == 0) { vba275.ToggleExpandCollapse(); } if ((vba275.OldChecked != vba275.Checked || vba275.OldCheckedState != vba275.CheckedState)) { if (v6ef39.ClientSideEvents.OnNodeCheckedChanged != "" && v6ef39.ClientSideEvents.OnNodeCheckedChanged != null) { ISEvent.Raise(v6ef39.ClientSideEvents.OnNodeCheckedChanged, v6ef39.Id, vba275); } if (v6ef39.AutoPostBackSettings.OnNodeCheckChanged == true && v6ef39.AutoCheckChildNodes == false) vba275.DoPostBack("OnNodeCheckChanged"); } } },
mc9915: function (v1e141, v46547) { if (v1e141.CurrentLoadingNode != null) { var v42e2 = v1e141.GetLoadingTableEl().style; v42e2.display = "none"; var v07c28 = ISXml.GetNode(v46547, "//LoadChildNodes"); var vb6666; if (v07c28 != null) { v1e141.NodeIndex = parseFloat(ISXml.GetAttribute(v07c28, "NodeIndex")); var v63471 = v1e141.CurrentLoadingNode.GetDivEl(); v63471.insertAdjacentHTML("afterBegin", v07c28.text); v1e141.GetSelectedNode(); vb6666 = v1e141.CurrentLoadingNode.Get("HierarchyNodes"); var vd8743_Tree = ISGetObject(v1e141.CurrentLoadingNode.ControlId); if (vb6666 != null && vb6666.length > 0) { for (var v59a17 = 0; v59a17 < vb6666.length; v59a17++) { wte5623.m23473(v1e141, vb6666[v59a17], v1e141.NodeStyle.Normal, v1e141.NodeStyle.Over, v1e141.NodeStyle.Active); vb6666[v59a17].GetInternalID(); wt57e67.m88f42(vb6666[v59a17], vb6666[v59a17].GetElement()); ISEvent.Raise(vd8743_Tree.ClientSideEvents.OnNodeAdd, vd8743_Tree.Id, vb6666[v59a17]); } } } v1e141.CurrentLoadingNode.IsLoadingNodeCompleted = true; if (vb6666 != null && vb6666.length > 0) { var v2aa16 = v1e141.CurrentLoadingNode; v2aa16.Set("Expanded", true); wt57e67.m39457(v2aa16, true); wt57e67.me3561(v2aa16); if (vd8743_Tree.ExpandWhenCheckedChanged && vd8743_Tree.AutoCheckChildNodes) { for (var v59a17 = 0; v59a17 < vb6666.length; v59a17++) { ISEvent.Raise(vd8743_Tree.ClientSideEvents.OnNodeCheckedChanged, vd8743_Tree.Id, vb6666[v59a17]); if (vd8743_Tree.ExpandWhenCheckedChanged && vb6666[v59a17].ChildNodeExpandable && vb6666[v59a17].GetNodes().length == 0) { vb6666[v59a17].ToggleExpandCollapse(); } } } } else { wte5623.m59593(v1e141.CurrentLoadingNode); v1e141.CurrentLoadingNode = null; } } },
mb9046: function (v24610, v7b144, v3b910) { if (v24610.Enabled == false || v24610.OldExpanded == true) return; if (v7b144.EnableLoadOnDemand && v7b144.CurrentLoadingNode != null && v24610.IsLoadingNodeCompleted == false) { if (v7b144.CurrentLoadingNode.IsLoadingNodeCompleted == false) { // wt57e67.me2f57(v24610, "Expanded"); // v24610.Expanded = !v24610.Expanded; // wt57e67.mdb551(v24610, "Expanded", v24610.Expanded); setTimeout(function () { wt57e67.mb9046(v24610, v7b144, v3b910); }, 50); return; } } if (v24610.LoadChildNodesOnDemand()) return; if (v24610.Get("Nodes").length == 0) return; if (v7b144.CurrentLoadingNode != v24610) { wt57e67.m39457(v24610); wt57e67.me3561(v24610); } if (v7b144.NodeSettings.EnableAnimation) { var v3b910 = v24610.GetDivEl(); if (v3b910) { window.clearInterval(v24610.IntervalId); v3b910.parentNode.style.display = "block"; v3b910.style.display = "block"; v3b910.style.top = (-1 * v3b910.offsetHeight) + v7b144.NodeHeightUnit; v3b910.parentNode.style.cssText = "height:1px;position:relative;overflow:hidden;overflow-x:hidden;overflow-y:hidden"; var ved644 = new WTISAnimatedObject(); ved644.Style = "Exp"; ved644.EnableOpacityOnAnimation = v7b144.NodeSettings.EnableOpacityOnAnimation; ved644.MaxLength = 6; ved644.Element = v3b910; ved644.Height = Math.abs(parseFloat(v3b910.style.top)); ved644.TimeoutInterval = 10; ved644.Type = "SlideDown"; ved644.OnCompleted = wte5623.m84036; ved644.EventArgs = new Array(v7b144, v24610); v7b144.IsAnimationPlayInProgress = true; ved644.Play(); v24610.IntervalId = ved644.IntervalId; ved644 = null; } } else { v3b910.style.display = ""; v3b910.parentNode.style.display = ""; wt57e67.mc7590(v24610); if (v24610.IsLoadingNodeCompleted && v7b144.CurrentLoadingNode == v24610) v7b144.CurrentLoadingNode = null; if (v7b144.ClientSideEvents.OnNodeExpand != "") ISEvent.Raise(v7b144.ClientSideEvents.OnNodeExpand, v7b144.Id, v24610); if (!v7b144.EnableLoadOnDemand) { var v65230 = new WebTreeViewDirtyNode(); v65230.Action = "Expanded"; v65230.InternalID = v24610.GetInternalID(); v7b144.AddDirtyNode(v65230); } if (v7b144.AutoPostBackSettings.OnNodeExpand == true) v24610.DoPostBack("OnNodeExpand"); } },
function RegistWebTreeView(id, expandWhenCheckedChanged) { var webTreeView = ISGetObject(id); webTreeView.ExpandWhenCheckedChanged = expandWhenCheckedChanged; }
Of course, there must also consider the case of direct load nodes.
Please use IE8 to view the example.
Hello,
WebTreeView currently doesn't support load node dynamically. If you want to expand all nodes, you can use ExpandAll() method available in client-side.
The sample provided in here has different functionality from WebTreeView. WebTreeView has LoadOnDemand feature, that is to retrieve the child node from datasource when you expand the node. You can browse the sample from here.
Hope this helps. Thank you.
Regards,-Martin-
I know LoadOnDemand feature, I just want to know how to achieve this feature with WebTreeView and LoadOnDemand.
thanks.
Currently, your scenario is not supported by WebTreeView. We have LoadOnDemand feature, but it cannot expand the childnode automatically like in your sample. Your sample is showing that when you click the checkbox, it will automatically check the childnode and expand them all dynamically. This is not implemented yet in WebTreeView. You have to manually click the child node in order to expand them on demand.
Oh,thanks!
Can you tell me,When the OnNodeAdd Event will be raised? I search the JS File, but did not find the calling code.
Glad to hear you have found a workaround for this feature. Hopefully it is useful for other members when they want to implement the same scenario like this.
Thank you.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname