While the checkbox state is checked at the root node, load on demand all the child nodes and set the child nodes checkbox to checked

[Hadi Teo]

Hi,

Here is my scenario. I have a two level tree : one root node with one level of child node. The child node are loaded on demand by configuring the root node to ServerSideCallBack.

My goal is to combine the setting check box action with the loading child nodes on demand. Means that when i check the root node, it will load on demand all the child nodes and set its child nodes to checked.

currently i am using these code snippet which is triggered on client side event : OnClientNodeChecked. It will trigger DoCientNodeChecked event.

	function UpdateAllChildren(nodes, checked)
	{
	var i;
	for (i=0; i<nodes.get_count(); i++)
	{
	if (checked)
	{
	nodes.getNode(i).check();
	}
	else
	{
	nodes.getNode(i).set_checked(false);
	}
	if (nodes.getNode(i).get_nodes().get_count()> 0)
	{
	UpdateAllChildren(nodes.getNode(i).get_nodes(), checked);
	}
	}
	}
	function DoClientNodeChecked(sender, eventArgs)
	{
	debugger
	if(!eventArgs.get_node().get_expanded())
	{
	eventArgs.get_node().set_expanded(true);
	}
	var childNodes;
	while(eventArgs.get_node().get_nodes() == null)
	{
	childNodes = eventArgs.get_node().get_nodes();
	}
	var isChecked = eventArgs.get_node().get_checked();
	UpdateAllChildren(childNodes, isChecked);
	}

All the root nodes are configured with ExpandMode = TreeNodeExpandMode.ServerSideCallBack. so the workaround is expand the current node using client side method using set_expanded(true). But since it's working asynchronously, the next method which is "var isChecked = eventArgs.get_node().get_checked();" is executed directly.

May i know how to wait or check whether all the child nodes has been loaded successfully, before traversing the child nodes ?

Thanks

hadi teo

[Hadi Teo]

I have utilized the OnClientNodePopulated client side event to hook some codes to check whether this particular node is checked or not, and then set the checkbox=checked to all the child nodes.

But there is an issue. although i have checked first whether this node is expanded or not, and then specifically expand the node so that it will load on demand all the child nodes, seems like it is not expanded.

	function UpdateAllChildren(nodes, checked)
	{
	var i;
	for (i=0; i<nodes.get_count(); i++)
	{
	if (checked)
	{
	nodes.getNode(i).check();
	}
	else
	{
	nodes.getNode(i).set_checked(false);
	}
	}
	}
	function DoClientNodeChecked(sender, eventArgs)
	{
	var expandStatus = eventArgs.get_node().get_expanded();
	if(!expandStatus)
	{
	eventArgs.get_node().expand();
	return;
	}
	var childNodes = eventArgs.get_node().get_nodes();
	var isChecked = eventArgs.get_node().get_checked();
	UpdateAllChildren(childNodes, isChecked);
	}
	function DoClientNodePopulated(sender, eventArgs)
	{
	var childNodes = eventArgs.get_node().get_nodes();
	var isChecked = eventArgs.get_node().get_checked();
	UpdateAllChildren(childNodes, isChecked);
	}

[Hadi Teo]

I tried to use server side events and completely abandoned the client side, just for the alternatives.

i try to hook on NodeCheck server side event and by checking on the Expanded property, i invoke Toggle() method or ExpandAllChildNodes() method, but with no success. The node is still closed. After close debugging, i notice that even though i specifically invoke Toggle() method, it won't invoke the NodeExpand server side event.

Here are my code snippet

	protected void tvSelection_NodeExpand(object sender, RadTreeNodeEventArgs e)
	{
	SubCategoryRepository subCategoryRepo = new SubCategoryRepository();
	List<SubCategory> subCategoryList = subCategoryRepo.RetrieveByCategoryId(new Guid(e.Node.Value));
	foreach (SubCategory subCategory in subCategoryList)
	{
	e.Node.Nodes.Add(new RadTreeNode(subCategory.Description, subCategory.Id.ToString()));
	}
	e.Node.ExpandMode = TreeNodeExpandMode.ClientSide;
	if (e.Node.Checked)
	{
	foreach (RadTreeNode node in e.Node.Nodes)
	{
	node.Checked = true;
	}
	}
	}
	protected void tvSelection_NodeCheck(object sender, RadTreeNodeEventArgs e)
	{
	RadTreeNode currentNode = e.Node;
	if (currentNode.ParentNode == null)
	{
	if (currentNode.Expanded)
	{
	foreach (RadTreeNode node in currentNode.Nodes)
	{
	node.Checked = true;
	}
	}
	else
	{
	currentNode.Toggle();
	}
	}
	else
	{
	foreach (RadTreeNode rootNode in tvSelection.Nodes)
	{
	foreach (RadTreeNode subCategoryNode in rootNode.Nodes)
	{
	if (subCategoryNode.Value == currentNode.Value)
	{
	subCategoryNode.Checked = currentNode.Checked;
	}
	}
	}
	}
	}

[Yana]

Hi Hadi,

Please find attached a simple page demonstrating the needed approach. Download it and give it a try.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.