jQuery UI Widgets Forums Navigation Tree How do I remove all children of a selected node?

This topic contains 2 replies, has 2 voices, and was last updated by  Thiago 9 years, 4 months ago.

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

  • Thiago
    Participant

    Hi team!

    How do I remove all children of a selected node?

    Root
    — Child 1
    —- Child 1.1
    —- Child 1.2
    —- Child 1.3
    —— Child 1.3.1
    ——– Child 1.3.1.1
    ——– Child 1.3.1.2
    —— Child 1.3.2
    —- Child 1.4
    — Child 2
    —- Child 2.1
    —- Child 2.2

    I need remove all node’s children when it is selected. For example, in the tree above if “Child 1.3” is selected, all sub-nodes should be eliminated, in this case Child 1.3.1, Child 1.3.1.1, Child 1.3.1.2 and Child 1.3.2. Thanks!


    Dimitar
    Participant

    Hello Thiago,

    Here is an example:

    <!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.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/jqxexpander.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxExpander
                $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
                // Create jqxTree
                var source = [
                {
                    icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                      { icon: "../../images/calendarIcon.png", label: "Calendar" },
                      { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                    ]
                },
                {
                    icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                     { icon: "../../images/folder.png", label: "Admin" },
                     { icon: "../../images/folder.png", label: "Corporate" },
                     { icon: "../../images/folder.png", label: "Finance" },
                     { icon: "../../images/folder.png", label: "Other" },
                    ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" }
                ];
    
                $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
                $('#jqxTree').jqxTree('selectItem', null);
                $("#jqxTree").on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);
                    var label = item.label;
                    var childrenLevel = item.level + 1;
                    var allItems = $('#jqxTree').jqxTree('getItems');
                    for (var i = allItems.length - 1; i >= 0; i--) {
                        if (allItems[i].parentElement) {
                            var parent = $('#jqxTree').jqxTree('getItem', allItems[i].parentElement);
                            if (allItems[i].level == childrenLevel && parent.label == label) {
                                $('#jqxTree').jqxTree('removeItem', allItems[i].element);
                            }
                        }
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id='jqxExpander'>
                <div>
                    Folders
                </div>
                <div style="overflow: hidden;">
                    <div style="border: none;" id='jqxTree'>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Thiago
    Participant

    Your code works fine. Thanks for helping me.

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

You must be logged in to reply to this topic.