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

Tagged: , , , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    How can i bind child elements for a root element on checkchanged event in jqxtree Posts
  • October 25, 2013 at 11:10 am How can i bind child elements for a root element on checkchanged event in jqxtree #31326

    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..

    October 25, 2013 at 12:16 pm How can i bind child elements for a root element on checkchanged event in jqxtree #31329

    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/

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

You must be logged in to reply to this topic.