1. #1
    Ext User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    mgarn is on a distinguished road

      0  

    Default Checkbox Tree Child nodes not checked When parent checked

    Checkbox Tree Child nodes not checked When parent checked


    I have a TreePanel with checkboxes on each node. The tree only has two levels. When the tree is first rendered it only displays the first (highest) level. In other words, in order to see the children the user would have to expand the visible nodes.

    I am finding that a parent node must be expanded once before my script below can cascade the checking of the box down to the children. In other words, if I check the parent node (before having ever expanded it) and then expand the node to see the children, the children are not checked. My TreePanel code is as follows

    Code:
    var fieldTreeList    =    new Ext.tree.TreePanel({
        title            :     'Maint History Field Selection',
        id                :    'fieldNameID',
        height            :     200,
        width            :     300,
        autoScroll        :    true,
        animate            :    true,
        enableDD        :    false,
        containerScroll    :     true,
        rootVisible        :     false,
        frame            :     true,
        collapsible        :    false,
        collapsed        :    false,
        header            :    false,
        root            :     {
            nodeType: 'async'
        },     
        loader            :    new Ext.tree.TreeLoader({
            url                :    HistProcSearch.contextPath + '/maintcatlist.do',
            requestMethod    :     'post',
            preloadChildren    :    true,
            baseAttrs        :     {
                checked    :    false
            },
            handleResponse    :     function(response){
                response.responseData = Ext.decode(response.responseText).maintCatList;
                this.constructor.prototype.handleResponse.call(this, response);
            }
        }),       
        listeners: {
            'checkchange': function(node, checked){
                
                //WHEN THE TREEE IS FIRST RENDERED THE HIDDEN CHILDREN DO NOT 
                //APPEAR TO RENDER UNTIL THEY ARE EXPANDED.  THUS CASCADING CHECKS
                //DO NOT CASCADE.  THE BELOW CHUNCK OF CODE EXPOSES ALL THE CHILDREN
    //            if( node.isExpandable() && !node.isExpanded() )
    //            {
    //                node.expand();
    //                node.collapse();
    //            }
                
                //CHANGE LOOK OF TEXT
                if( checked )
                {
                    node.getUI().addClass('SelectedItem');
                    
                    if( node.parentNode.text != "Categories" )
                    {
                        node.parentNode.getUI().addClass('SelectedItem');
                        fieldTreeList.suspendEvents(false);
                        node.parentNode.getUI().toggleCheck(checked);
                        fieldTreeList.resumeEvents();
                    }
                }
                else
                {
                    node.getUI().removeClass('SelectedItem');
                    
                    //GET PARENT NODE
                    var p = node.parentNode;
                    
                    //CHECK TO SEE IF ANY CHILDREN ARE STILL CHECK
                    //BEFORE UNCHECKING PARENT
                    var pChecked = 'N';
                    if( p.hasChildNodes() )
                    {
                        p.eachChild(function(n){
                            if( n.getUI().isChecked() )
                                pChecked = 'Y';
                        })
                    }
                    
                    if( pChecked == 'N' )
                    {
                        node.parentNode.getUI().removeClass('SelectedItem');
                        fieldTreeList.suspendEvents(false);
                        node.parentNode.getUI().toggleCheck(checked);
                        fieldTreeList.resumeEvents();
                    }                        
                }
                
                //SET CHILDREN SAME AS PARENT
                if( node.hasChildNodes() )
                {
                    node.eachChild(function(n){
                        n.getUI().toggleCheck(checked);
                    });
                }
            }
        }
    });
    My code will check and uncheck the children whether they are currently expanded or not, as long as they have been expanded once first. But before they are expanded the first time after loading the tree, the code above does not find the children as it should. It is as if the children nodes do not exist until they are expanded for the first time. I attempted to use the preloadChildren : true config property, but this did not make a difference.

    As you can see I have a commented section of my code that expands and collapses any node that is checked so that the children will be available to check or uncheck. There are three problems with this.
    1. one node in the tree I am dealing with has over 300 child nodes and to expand and collapse them will take too long.
    2. this expand and collapse happens every time a parent is checked when the children are collapsed
    3. It is ugly

    If the user knows what the children are without expanding the parent and knows he wants to select all the children, the user should be able to check the parent and expect that all the children are check without needing to expand them.

    Does anyone have a better solution?

  2. #2
    Ext Premium Member
    Join Date
    Oct 2010
    Posts
    2
    Vote Rating
    0
    mseto is on a distinguished road

      0  

    Default


    I just ran into the same problem. Did you find a better solution?

  3. #3
    Ext User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    mgarn is on a distinguished road

      0  

    Default


    mseto,

    No I have not found a solution. The best work around I have come up with is the following additions to the TreeLoader
    Code:
    HistProcSearch.treeCategoryFieldLoader =
    new Ext.tree.TreeLoader({ url : HistProcSearch.contextPath + '/maintcatlist.do', requestMethod : 'post', preloadChildren : true, baseAttrs : { expanded: true
    }, handleResponse :
    function(response){ response.responseData = Ext.decode(response.responseText).maintCatList; this.constructor.prototype.handleResponse.call(this, response); }, listeners : { //THE COMBINATION OF THE baseAttrs expanded:true AND
    //THE BELOW ACTION MAKE IT SO THAT CHILD NODES WILL BE
    //CHECKED WHEN THE PARENT CATEGORY IS CHECKED WITHOUT THE USER
    //HAVING TO EXPAND THE CATEGORY FIRST
    'load' : function(loader, node, jsonObj){ node.collapseChildNodes(true); } }
    });
    Where the "baseAttrs : { expanded : true }" causes all nodes to be expanded when rendered. Then the listener closes them all upon load " 'load' : function(loader, node, jsonObj){ node.collapseChildNodes(true); }"

    This solution is not the best because it takes time to render all nodes expanded and then immediately collapse them. It may not be an issue if you have a small tree. for large trees it could become a problem.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    0
    barisboyukbas is on a distinguished road

      0  

    Default I have the same problem

    I have the same problem


    I have a large AsyncTree and i need something that can check all the childnodes of my newly checked node. Almost i need it while expanding the node. I wish there is an option for it.

Similar Threads

  1. [solved] programatically unchecking checked tree nodes
    By dgersh in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 18 Jul 2012, 12:29 AM
  2. Changing tree nodes checked attribute does not update visually
    By odig in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Jul 2010, 7:39 PM
  3. Filtering the checked nodes in a Tree Panel
    By parit in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 10 Jun 2010, 7:44 AM
  4. expand children of a checked parent node in tree
    By phpfreak in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 Dec 2009, 4:11 AM
  5. Tree.TreePanel: how can i checked nodes recursively ?
    By mikeschthecat in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Nov 2009, 1:07 PM

Thread Participants: 2

Tags for this Thread