jQuery UI Widgets › Forums › Navigation › Tree › How to setting checked state between perentElement and element and childElement?
Tagged: checkAll, checkboxes, Tree
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 9 months ago.
-
Author
-
May 9, 2013 at 9:09 am How to setting checked state between perentElement and element and childElement? #20820
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.
May 9, 2013 at 9:23 am How to setting checked state between perentElement and element and childElement? #20821Hi,
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 StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.