jQuery UI Widgets Forums Navigation Tree How to setting checked state between perentElement and element and childElement?

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • yonysun
    Member

    How to setting checked state between perentElement and element and childElement?

    the ‘checkAll’ and ‘uncheckAll’ methods can’t meet the actual demand,because my tree has many level.

    Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, Tree" />
    <meta name="description" content="The jqxTree can display a checkboxes next to its items. You can also enable three-state checkboxes. In this mode, when the user
    checks an item, its sub items also become checked. When there is an unchecked item, the parent item is in indeterminate state." />
    <title id='Description'>The jqxTree can display a checkboxes next to its items. You
    can also enable three-state checkboxes. In this mode, when the user checks an item,
    its sub items also become checked. When there is an unchecked item, the parent item
    is in indeterminate state.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // Create jqxTree
    var theme = getDemoTheme();
    // create jqxTree
    $('#jqxTree').jqxTree({ height: '400px', checkboxes: true,hasThreeStates: true, width: '330px', theme: theme });
    var items = $('#jqxTree').jqxTree('getItems');
    var firstLevelItems = new Array();
    for (var i = 0; i < items.length; i++) {
    if (items[i].level == 1) {
    firstLevelItems.push(items[i]);
    };
    };
    $('#jqxTree').on('checkChange',function(event){
    var args = event.args;
    var element = args.element;
    var checked = args.checked;
    // if(checked)
    // $('#jqxTree').jqxTree('checkAll');
    // else
    // $('#jqxTree').jqxTree('uncheckAll');
    if(checked){
    var checkedLevel = $('#jqxTree').jqxTree('getItem', element).level;
    var nextItem = $('#jqxTree').jqxTree('getNextItem',element);
    while(nextItem.level > checkedLevel){
    $('#jqxTree').jqxTree('expandItem', nextItem);
    $('#jqxTree').jqxTree('checkItem', nextItem, true);
    $('#jqxTree').jqxTree('collapseItem', nextItem);
    nextItem = $('#jqxTree').jqxTree('getNextItem',nextItem);
    }
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
    <ul>
    <li id='home'>Home</li>
    <li item-expanded='true'>Solutions
    <ul>
    <li>Education</li>
    <li>Financial services</li>
    <li>Government</li>
    <li>Manufacturing</li>
    <li>Solutions
    <ul>
    <li>Consumer photo and video</li>
    <li>Mobile</li>
    <li>Rich Internet applications</li>
    <li>Technical communication</li>
    <li>Training and eLearning</li>
    <li>Web conferencing</li>
    </ul>
    </li>
    <li>All industries and solutions</li>
    </ul>
    </li>
    <li>Products
    <ul>
    <li>PC products</li>
    <li>Mobile products</li>
    <li>All products</li>
    </ul>
    </li>
    <li>Support
    <ul>
    <li>Support home</li>
    <li>Customer Service</li>
    <li>Knowledge base</li>
    <li>Books</li>
    <li>Training and certification</li>
    <li>Support programs</li>
    <li>Forums</li>
    <li>Documentation</li>
    <li>Updates</li>
    </ul>
    </li>
    <li>Communities
    <ul>
    <li>Designers</li>
    <li>Developers</li>
    <li>Educators and students</li>
    <li>Partners</li>
    <li>By resource
    <ul>
    <li>Labs</li>
    <li>TV</li>
    <li>Forums</li>
    <li>Exchange</li>
    <li>Blogs</li>
    <li>Experience Design</li>
    </ul>
    </li>
    </ul>
    </li>
    <li>Company
    <ul>
    <li>About Us</li>
    <li>Press</li>
    <li>Investor Relations</li>
    <li>Corporate Affairs</li>
    <li>Careers</li>
    <li>Showcase</li>
    <li>Events</li>
    <li>Contact Us</li>
    <li>Become an affiliate</li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

    I want make the checkbox has three states,

    and hen I click one checkbox ,it’s child checkbox could be checked or unchecked automatic.

    When I using the “checkAll” and the “uncheckAll” methods,the FireFox report “too much recursion” error and the IE browser report stack overflow.


    Peter Stoev
    Keymaster

    Hi,

    Well, the problem in that code is that you call “checkAll” in checkChange method which is raised when the Check State is changed. However, by calling a method which checks checkboxes it will also raise checkChange event and you will call again checkAll method and so on.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.