jQuery UI Widgets › Forums › Navigation › Tree › how can removeall sub items in the tree by selecting parent tree item?

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Minko 12 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    how can removeall sub items in the tree by selecting parent tree item? Posts
  • July 4, 2012 at 5:30 am how can removeall sub items in the tree by selecting parent tree item? #5630

    rajuk
    Member
    July 4, 2012 at 2:50 pm how can removeall sub items in the tree by selecting parent tree item? #5649

    Minko
    Blocked

    Hello Rajuk,

    you can achieve this functionality using the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.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 () {
                $('#jqxTree').jqxTree({ height: '400px', width: '300px', theme: 'classic' });
                $('#Remove').jqxButton({ height: '25px', width: '100px', theme: 'classic' });
                $('#Remove').click(function () {
                    var selectedItem = $('#jqxTree').jqxTree('selectedItem'),
                        count,
                        children;
                    if (selectedItem != null) {
                        children = $(selectedItem.element).find('li');
                        count = children.length;
                        for (var i = 0; i < count; i += 1) {
                            if (i < count - 1) {
                                $('#jqxTree').jqxTree('removeItem', children[i], false);
                            } else {
                                $('#jqxTree').jqxTree('removeItem', children[i], true);
                            }
                        }
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div style='float: left;'>
                <div id='jqxTree' style='float: left; margin-left: 20px;'>
                    <ul>
                        <li id='home' item-selected='true'>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>
                    </ul>
                </div>
                <div style='margin-left: 60px; float: left;'>
                    <div style='margin-top: 10px;'>
                        <input type="button" id='Remove' value="Remove" />
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    When you select parent item and click on the “Remove” button all it’s children are going to be removed.

    Best regards,
    Minko

    jQWidgets Team
    http://jqwidgets.com/

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

You must be logged in to reply to this topic.