Usman ur Rehman Ahmed's blog

 

Telerik Tree View Check/Uncheck Parent/Child Nodes on Client End

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

While using default Telerik tree control shipped with DNN, I needed a client side function to perform following,

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

-          Check all children nodes if parent node is checked

-          Uncheck all children nodes if parent node is unchecked 

-          Check parent node when all children nodes are checked

-          Uncheck parent node when any single of child node is unchecked

The standard practice to perform such an operation is by setting the OnClientNodeChecked property,

<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True"
 OnClientNodeChecked="clientNodeChecked"></telerik:RadTreeView>

To the function handler which receives the reference to checked/unchecked node in argument. Such a function is given below,

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

function clientNodeChecked(sender, eventArgs) {

    //1- Uncheck Parent Node in upward fashion

    var node = eventArgs.get_node();

    if (!node.get_checked()) {

        while (node.get_parent().set_checked != null) {

            node.get_parent().set_checked(false);

            node = node.get_parent();

        }

    }

 

    //2- Check Child Nodes (if any)

    var childNodes = eventArgs.get_node().get_nodes();

    var isChecked = eventArgs.get_node().get_checked();

    UpdateAllChildren(childNodes, isChecked);

 

    //3- If all sibling nodes are checked then check parent as well

    //Get Sibling nodes first

    var siblingNodes = eventArgs.get_node().get_parent().get_nodes();

    var i;

    var allSiblingsChecked = true;


    //4- Loop through all sibling nodes and see if all of them are checked

    for (i = 0; i < siblingNodes.get_count(); i++) {

        isChecked = siblingNodes.getNode(i).get_checked();

        if (!isChecked) {

            allSiblingsChecked = false;

            break;

        }

    }

    if (allSiblingsChecked) {

        //Check parent node now

        eventArgs.get_node().get_parent().set_checked(true);

    }

}

Check-uncheck_parent-child-nodes
The function for “UpdateAllChildren” is given below but referenced from,

 

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);

        }

    }

}

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

Ref: http://www.telerik.com/help/aspnet-ajax/tree_checkboxesallchildnodes.html

 

Filed under: OnClientNodeChecked child sibling telerik transparent tree view
11
To Posterous, Love Metalab