jQWidgets Forums

Tagged: checked, getCheckedItems, item, jqxtree, Tree

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

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

Author

How to get parents checked items only Posts

May 17, 2013 at 7:28 am How to get parents checked items only #21319

bebewinla

Member

I am a new jqwidgets user. I use jqxtree to create 3 levels nested tree with hasThreeState= True

__Level 1

____Level 1.1

____Level 1.2

______Level 1.2.1

______Level 1.2.2

___Level 2

_____Level 2.1

_______ Level 2.1.1

_______ Level 2.1.2

I was able to get the values of checked items, but I only want to get the parent’s item value only. ie : if level 1 is checked, I only want value=level 1 instead of level 1, level 1.1, level 1.2, level 1.2.1, level 1.2.2. or if level 2.1 is checked, I only want value=level 2.1 instead of level 2.1, level 2.1.1, level 2.1.2.

How do I go about to get this.

May 17, 2013 at 8:42 am How to get parents checked items only #21333

Dimitar

Participant

Hello bebewinla,

Here is the solution – the array checkedParentItems contains the desired items:

<!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.8.3.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 () {
            // Create jqxTree 
            var theme = getDemoTheme();
            // create jqxTree
            $('#jqxTree').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', theme: theme });
            $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true, theme: theme });
            $('#jqxCheckBox').on('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTree').jqxTree({ hasThreeStates: checked });
            });
            $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
            $("#get").click(function () {
                var items = $('#jqxTree').jqxTree('getCheckedItems');
                var checkedParentItems = new Array();
                for (var i = 0; i < items.length; i++) {
                    var parentI = $('#jqxTree').jqxTree('getItem', items[i].parentElement);
                    if (parentI == null) {
                        checkedParentItems.push(items[i]);
                    } else if (parentI && parentI.checked != true) {
                        checkedParentItems.push(items[i]);
                    };
                };
            });
        });
    </script>
</head>
<body class='default'>
    <button id="get">
        Get checked parent items</button>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTree' style='float: left; margin-left: 20px;'>
                <ul>
                    <li id='home'>Home</li>
                    <li item-checked='true' item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li item-checked='false'>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                            </li>
                            <li>All industries and solutions</li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li>PC products</li>
                            <li>Mobile products</li>
                            <li>All products</li>
                        </ul>
                    </li>
                    <li>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                            <li>Knowledge base</li>
                            <li>Books</li>
                            <li>Training and certification</li>
                            <li>Support programs</li>
                            <li>Forums</li>
                            <li>Documentation</li>
                            <li>Updates</li>
                        </ul>
                    </li>
                    <li>Communities
                        <ul>
                            <li>Designers</li>
                            <li>Developers</li>
                            <li>Educators and students</li>
                            <li>Partners</li>
                            <li>By resource
                                <ul>
                                    <li>Labs</li>
                                    <li>TV</li>
                                    <li>Forums</li>
                                    <li>Exchange</li>
                                    <li>Blogs</li>
                                    <li>Experience Design</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Company
                        <ul>
                            <li>About Us</li>
                            <li>Press</li>
                            <li>Investor Relations</li>
                            <li>Corporate Affairs</li>
                            <li>Careers</li>
                            <li>Showcase</li>
                            <li>Events</li>
                            <li>Contact Us</li>
                            <li>Become an affiliate</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div style='margin-left: 60px; float: left;'>
                <div style='margin-top: 10px;'>
                    <div id='jqxCheckBox'>
                        Three Check States</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 21, 2013 at 6:35 pm How to get parents checked items only #21561

bebewinla

Member

It works beautifully. I have another question. One of the demo JSON tree, I added the type either “hot” or “cold”.
var data = [
{ “id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”,
“Type” : “hot”,
“value”: “$2.3”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Chocolate”,
“Type” : “cold”,
“value”: “$2.3”
}, {….
…….

when we do “getCheckedItems”, items[i].label would yield “Hot Chocolate” , “Peppermint Chocolate”. How do we get the “Type” or “value” values, it seems like it would be items[i].Type , items[i].value, but we got undefined. Please help.
Thanks,

May 22, 2013 at 5:49 am How to get parents checked items only #21588

Dimitar

Participant

Hi bebewinla,

You cannot add custom datafields, such as “Type”, in a jqxTree source. The value datafield is used for storing custom data. You can easily get it, as shown in the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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 theme = getDemoTheme();
            var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "Type": "hot",
                    "value": "$2.3"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Chocolate",
                    "Type": "cold",
                    "value": "$2.3"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "Type": "hot",
                    "value": "$2.3"
                }]
            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' },
                        { name: 'Type' }
                    ],
                    id: 'id',
                    localdata: data
                };
            // create data adapter.
            var dataAdapter = new $.jqx.dataAdapter(source);
            // perform Data Binding.
            dataAdapter.dataBind();
            // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
            // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
            // specifies the mapping between the 'text' and 'label' fields.  
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
            $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme, checkboxes: true });
            $("#getCheckedItems").click(function () {
                var items = $('#jqxWidget').jqxTree('getCheckedItems');
                alert("Value of the first checked item: " + items[0].value);
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <button id="getCheckedItems">
            Get checked items</button>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 22, 2013 at 4:41 pm How to get parents checked items only #21668

bebewinla

Member

Hi Dimitar,
I did not quite understand. You said we could not add custom datafield (ie “Type” in this case) to the jqxtree. But then your example you have included the “Type”. I can only get items[i].value & items[i].label, but not the “Type”( cold/hot). That seems odd. So if I need that “Type” infor, do I define in a different json data structure, and how do you bind them together. Thanks for your help.
Linh

May 23, 2013 at 6:16 am How to get parents checked items only #21711

Dimitar

Participant

Hi Linh,

Sorry for the misunderstanding. You can add a custom datafield to the sourse (i.e. “Type”), but you cannot access it in jqxTree. The reason I added the “Type” datafield is for illustrating this behaviour.

Best Regards,
Dimitar

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

May 23, 2013 at 4:12 pm How to get parents checked items only #21774

bebewinla

Member

Hi Dimitar,
Is this feature of not able to access the custom datafield a limitation of jqxTree. What other jqx widgets that if adding custom fields are useful (ie jqxgrid ?). So for jqxTree, only label & value are used. right ?
Thanks,
Lynn

May 27, 2013 at 5:34 am How to get parents checked items only #21880

Dimitar

Participant

Hi Lynn,

This limitation is due to the specific format of the tree items. The only allowed datafield to store custom data is value.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.