jQuery UI Widgets Forums Navigation Tree expandAll – depth level

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • expandAll – depth level #49228

    jasne
    Participant

    Hi,

    I’m using example from
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/ajaxloading.htm

    I’ve added method “explandAll” after load. But my category tree have 4-level depth. “expandAll” can expand only 2-level depth… How do 4 -level depth ?

    expandAll – depth level #49238

    Dimitar
    Participant

    Hello jasne,

    It is not possible to expand all levels in this case, because the items from the lower levels are dynamically added when the items from the upper levels are expanded. Thus, you will have to call the expandAll method multiple times.

    Best Regards,
    Dimitar

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

    expandAll – depth level #49308

    jasne
    Participant

    Dimitar thanks,

    I need expandAll to show which category are checked (checkbox). Perhaps is other way to present for a user which category are checked from fourth level deep ?

    expandAll – depth level #49345

    Dimitar
    Participant

    Hi jasne,

    You can get all checked items with the method getCheckedItems. Note, however, that the items should be already added to the tree. In the case of Ajax loading, the items are not added until their parent is expanded. Thus, before getting the fourth-level checked items, you have to expand the third-level items.

    Best Regards,
    Dimitar

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

    expandAll – depth level #49374

    jasne
    Participant

    Dimitar thanks !

    Is there any way to limit user can check only one checkbox from multi-level category tree?

    expandAll – depth level #49377

    Dimitar
    Participant

    Hi jasne,

    Here is how to achieve this functionality. Note, however, that it works for all checkboxes only when hasThreeStates is set to false, otherwise it would work only for bottom-level items (leaves).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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
                $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: false, checkboxes: true, width: '330px' });
                $('#jqxTree').css('visibility', 'visible');
                $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: false });
                $('#jqxCheckBox').on('change', function (event) {
                    var checked = event.args.checked;
                    $('#jqxTree').jqxTree({ hasThreeStates: checked });
                });
                $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
                $('#jqxTree').on('checkChange', function (event) {
                    var args = event.args;
                    var element = args.element;
                    var checked = args.checked;
                    var checkedItems = $('#jqxTree').jqxTree('getCheckedItems');
                    if (checked == true && checkedItems.length > 1) {
                        $('#jqxTree').jqxTree('uncheckItem', element);
                    };
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div style='float: left;'>
                <div id='jqxTree' style='visibility: hidden; 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>
                <div style='margin-left: 60px; float: left;'>
                    <div style='margin-top: 10px;'>
                        <div id='jqxCheckBox'>
                            Three Check States</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.