jQuery UI Widgets Forums Navigation Tree How can i bind child elements for a root element on checkchanged event in jqxtree

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

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

  • Narendra
    Participant

    I have a jqxtree with checkboxes contains some root elements like facebook, twitter, linkedin, googleplus, when I checked on facebook element I want to bind dynamically some child elements (For ex: likes, comments, shares etc.) for facebook, If unchecked facebook then the child elements wants to be disappeared, How can i achieve it..

    Please try to give reply quickly..

    Thanks in advance..


    Dimitar
    Participant

    Hello narendra.pvnb,

    Here is how to achieve the requested functionality:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.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 () {
    var source = [
    { label: "facebook" }, { label: "twitter" }, { label: "linkedin" }, { label: "googleplus" }
    ];
    $('#jqxTree').jqxTree({ source: source, width: 150, height: 300, checkboxes: true });
    $('#jqxTree').on('checkChange', function (event) {
    var args = event.args;
    var element = args.element;
    var item = $('#jqxTree').jqxTree('getItem', element);
    if (item.label == "facebook") {
    var checked = args.checked;
    if (checked == true) {
    $('#jqxTree').jqxTree('addTo', { label: 'likes' }, element);
    $('#jqxTree').jqxTree('addTo', { label: 'comments' }, element);
    $('#jqxTree').jqxTree('addTo', { label: 'shares' }, element);
    } else {
    $('#jqxTree').jqxTree('updateItem', item, { items: [] });
    var item = $('#jqxTree').jqxTree('getItem', element);
    var children = $(item.subtreeElement).children();
    for (var i = 0; i < children.length; i++) {
    $('#jqxTree').jqxTree('removeItem', children[i]);
    };
    };
    };
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxTree'>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.