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

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

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

  • rajuk
    • This topic was modified 10 years, 7 months ago by  rajuk.
    • This topic was modified 10 years, 7 months ago by  rajuk.
    • This topic was modified 10 years, 7 months ago by  Peter Stoev. Reason: Moved to Tree Forum


    Hello Rajuk,

    you can achieve this functionality using the following code:

    <!DOCTYPE html>
    <html lang="en">
    <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'),
    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);
    <body class='default'>
    <div id='jqxWidget'>
    <div style='float: left;'>
    <div id='jqxTree' style='float: left; margin-left: 20px;'>
    <li id='home' item-selected='true'>Home</li>
    <li item-expanded='true'>Solutions
    <li>Financial services</li>
    <li>Consumer photo and video</li>
    <li>Rich Internet applications</li>
    <li>Technical communication</li>
    <li>Training and eLearning</li>
    <li>Web conferencing</li>
    <li>All industries and solutions</li>
    <div style='margin-left: 60px; float: left;'>
    <div style='margin-top: 10px;'>
    <input type="button" id='Remove' value="Remove" />

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

    Best regards,

    jQWidgets Team

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

You must be logged in to reply to this topic.