jQWidgets Forums

jQuery UI Widgets Forums Navigation Tree Hide treeitem possible?

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Hide treeitem possible? #59630

    Rob
    Participant

    Hi

    Is it possible to hide a single tree item?

    Thanks in advance?
    Rob

    Hide treeitem possible? #59637

    Nadezhda
    Participant

    Hello Rob,

    Please, find below an example which shows how to hide tree item:

    <!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></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // create jqxTree
                $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px' });
                $('#jqxTree').css('visibility', 'visible');
                $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true });
                $('#jqxCheckBox').on('change', function (event) {
                    var checked = event.args.checked;
                    $('#jqxTree').jqxTree({ hasThreeStates: checked });
                });
                $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
    
                $("#jqxButton").jqxToggleButton({ width: '200', toggled: true });            
                $("#jqxButton").on('click', function () {
                    var toggled = $("#jqxButton").jqxToggleButton('toggled');
                    if (toggled) {                                   
                        $("#home").css("display", "none");
                    }
                    else $("#home").css("display", "list-item");
                });
            });
        </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-checked='true' item-expanded='true'>Solutions
                            <ul>
                                <li>Education</li>
                                <li>Financial services</li>
                                <li>Government</li>
                                <li item-checked='false'>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>
                        <input type="button" value="Hide/Show" id='jqxButton' />
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    You can also use the “getItem” method if you don’t have element’s id.

    Best Regards,
    Nadezhda

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

    Hide treeitem possible? #59643

    Rob
    Participant

    Hi Nadezhda,

    Thanks for the info.. I already has a JavaScript loop to iterate throe the list items. However i did understood how to set the CSS
    The following code shows what i did and changed.

    REMARK !! Using (visibility hide) instead if (display none) does not hide <images.. /> if embedded a the list item. Not sure of that is by design or to be considered as a bug

    
    funtion myHide(id2Hide)
    {
    var items = tree.jqxTree('getItems');
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.value == null)
            continue;
        if (item.value[0] == 'p') {
            if (parseInt(item.value.substr(1)) == id2Hide) {
            // changed this
            // item.css("visibility", "none");
            // into this 
            $('#'+item.id).css("display", "none");
                return;
            }
        }
    }
    }
    
    Hide treeitem possible? #59646

    Nadezhda
    Participant

    Hi Rob,

    I suggest you to use “display: none” because “visibility: hidden” hides an element but it will take up space.

    Best Regards,
    Nadezhda

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

    Hide treeitem possible? #59650

    Rob
    Participant

    Hi Nadezhda,

    Did you noticed the remark i wrote?

    Thanks, Rob

    Hide treeitem possible? #59677

    Nadezhda
    Participant

    Hi Rob,

    If you want to hide item, please use “display: none”. We can not suggest you different solution.

    Best Regards,
    Nadezhda

    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.