[CLOSED] Treepanel cascade check

  1. #1

    [CLOSED] Treepanel cascade check

    Hi,

    How do i check / uncheck all recursive childnode checkbox based on parent node checkbox selection in treepanel ?

    I tried the below solution but this works only if node is expanded. i want all recursive child node to be checked / unchecked based on parent node selection even if the child nodes are expanded or not, and if all child node is check / uncheck parent node should also be checked / uncheck.

    on tree checkchange event
    <CheckChange Handler="UserMaintanenceControl_NodeCheckChange(node, checked);" />
    
    javascript method
    var UserMaintanenceControl_NodeCheckChange = function (node, isChecked)
            {  
                var f = function(scope) {
                    if(scope.attributes != null){ 
                        scope.attributes.checked = isChecked;
                        getElementsByClass('x-tree-node-cb', scope.ui.getEl())[0].checked = true;  
                        return true;
                    }
                };
                
                node.cascade(f);
            }
    Note : We are using coolite v0.8, we have plan to migrate newer version in next release.

    Thanks & Regards,
    Inayath.
    Last edited by Daniil; Apr 01, 2011 at 1:08 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Please wrap the code in [CODE] tags, see
    Forum Guidelines For Posting New Topics
  3. #3
    Hi,

    How do i check / uncheck all recursive childnode checkbox based on parent node checkbox selection in treepanel ?

    I tried the below solution but this works only if node is expanded. i want all recursive child node to be checked / unchecked based on parent node selection even if the child nodes are expanded or not, and if all child node is check / uncheck parent node should also be checked / uncheck.

    on tree checkchange event
    <CheckChange Handler="UserMaintanenceControl_NodeCheckChange(no de, checked);" />
    javascript method
    var UserMaintanenceControl_NodeCheckChange = function (node, isChecked)
    { 
    var f = function(scope) {
    if(scope.attributes != null){ 
    scope.attributes.checked = isChecked;
    getElementsByClass('x-tree-node-cb', scope.ui.getEl())[0].checked = true; 
    return true;
    }
    };
    
    node.cascade(f);
    }
    Note : We are using coolite v0.8, we have plan to migrate newer version in next release.

    Thanks & Regards,
    Inayath.
  4. #4
    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var onRootCheckChange = function (node, checked) {
                node.eachChild(function (node) {
                    node.cascade(function (node) {
                        if (node.ui.rendered) {
                            node.ui.toggleCheck(checked);
                        } else {
                            node.attributes.checked = checked;
                        }
                    });
                });    
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
            <Root>
                <ext:TreeNode Text="Root (level 0)" Expanded="true" Checked="False">
                    <Nodes>
                        <ext:TreeNode Text="Node1 (level 1)" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Node1 (level 2)" Expanded="false">
                                    <Nodes>
                                        <ext:TreeNode Text="Node1 (level 3)" />
                                        <ext:TreeNode Text="Node2 (level 3)" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                        <ext:TreeNode Text="Node2 (level 1)" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Node1 (level 2)" Expanded="false">
                                    <Nodes>
                                        <ext:TreeNode Text="Node1 (level 3)" />
                                        <ext:TreeNode Text="Node2 (level 3)" />
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                    <Listeners>
                        <CheckChange Fn="onRootCheckChange" />
                    </Listeners>
                </ext:TreeNode>
            </Root>
            <Listeners>
                <BeforeAppend Handler="node.attributes.checked = false;" /> <%-- To avoid setting .Checked for each node --%>
            </Listeners>
        </ext:TreePanel>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Editable check column inside a TreePanel
    By RCN in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 04, 2012, 9:07 AM
  2. [CLOSED] TreePanel. items checked in cascade
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 18, 2012, 2:12 PM
  3. [CLOSED] [1.0] TreePanel Check
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 09, 2011, 7:11 PM
  4. [CLOSED] Check and uncheck all checkboxes treepanel
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 11, 2010, 10:50 AM
  5. Very simple question TreePanel check or uncheck all
    By apocalipse9 in forum 1.x Help
    Replies: 0
    Last Post: Jun 17, 2010, 12:36 AM

Tags for this Thread

Posting Permissions