jQuery UI Widgets Forums Navigation Tree how to get only child items on getCheckedItems

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 9 years, 7 months ago.

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

  • Nagoor
    Participant

    Hi,

    I am using jqxtree with hasThreeStates property. i could able to select all the childs or parents i need, but in an event i need only the child values of all selected parents (or sub-parents). suppose, the first parent node has two child nodes and each child node contains two other childs, on selecting this parent node, i should get all the four last child nodes.

    ->ONE
    ->one
    ->1
    ->2
    ->two
    ->3
    ->4
    ->TWO
    ->two
    ->three

    so, on selecting ONE, i need values to be returnes as 1,2,3,4. pls let me know any way to do this.

    Thanks & Regards
    _ _

    Nagoor


    Dimitar
    Participant

    Hello Nagoor,

    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.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 () {
                $('#jqxTree').jqxTree({ height: '300px', width: '300px', checkboxes: true, hasThreeStates: true });
                $("#getItems").click(function () {
                    var items = $('#jqxTree').jqxTree('getCheckedItems');
                    var secondLevelItems = new Array();
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].level == 2) {
                            secondLevelItems.push(items[i].label);
                        }
                    }
                    alert(secondLevelItems);
                });
            });
        </script>
    </head>
    <body class='default'>
        <button id="getItems">
            Get items</button>
        <div id='jqxTree'>
            <ul>
                <li item-expanded='true' item-checked='true'>ONE
                    <ul>
                        <li item-expanded='true'>One
                            <ul>
                                <li>1</li>
                                <li>2</li>
                            </ul>
                        </li>
                        <li item-expanded='true'>Two
                            <ul>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>TWO
                    <ul>
                        <li>Two</li>
                        <li>Three</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Nagoor
    Participant

    HI Dimitar,

    Thank you very much for reply.the above example is pretty helpful for me. In my application it is not necessarily 2 levels. each parent may have more than 2 or 3 levels. for instance, the first parent may have 2 levels of child nodes and the second may have only one child and it goes on. is there any way to find the last level for each parent so that i can implement the above example for each parent level.
    Pls help me

    Thanks & Regards

    Nagoor


    Dimitar
    Participant

    Hi Nagoor,

    In that case, modify the code as follows:

    $("#getItems").click(function () {
        var items = $('#jqxTree').jqxTree('getCheckedItems');
        var leafItems = new Array();
        for (var i = 0; i < items.length; i++) {
            if (items[i].hasItems == false) {
                leafItems.push(items[i].label);
            }
        }
        alert(leafItems);
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.