Setting "checked=true" from JSON tree does not works! - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: #jquery-tree, checkboxes, checked state, javascript tree, jqwidgets tree, json tree, Tree

This topic contains 7 replies, has 2 voices, and was last updated by Hristo 7 years, 4 months ago.

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

Author

Setting "checked=true" from JSON tree does not works! Posts
July 14, 2017 at 6:38 pm Setting "checked=true" from JSON tree does not works! #94931

mrplayq
Participant

Hello,

I’m trying to use jqxTree loaded from json data that comes from my server side like so:
var jsonData = jQuery.parseJSON(‘@jsonCountryTree’);
$(‘#regionsTree’).jqxTree({ source: jsonData, height: ‘480px’, hasThreeStates: true, checkboxes: true, width: ‘100%’ });

The jsonData is a collection of base node classes that are linked to each other thru the items member in a tree-like fashion. Each node can have other nodes or not (as in the case of leaf nodes).

The base node model class looks like this:

public class CountryFamilyTreeNode
{
public long id { get; set; }
public long parentid { get; set; }
public string label { get; set; }
public bool checked{ get; set; }
public List<CountryFamilyTreeNode> items { get; set; }
}

Now setting the “checked” property in jsonData has no affect on non-leaf nodes. It only works for leaf nodes (with no children) but it does not work for regular nodes with children! Furthermore, the checked state is not propagated up to its parent node which should show the partially-selected icon.

Please help as I’m stuck.
Thanks,
Russell B.

July 19, 2017 at 9:55 am Setting "checked=true" from JSON tree does not works! #94987

Hristo
Participant

Hello Russell B.,

If you want to set directly JSON object without DataAdapter you should follow the approach from the example below:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/defaultfunctionality.htm?light
It should contain correct naming of the objects – “icon”, “items”, “expanded”, “selected”, and so on.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

July 21, 2017 at 6:17 pm Setting "checked=true" from JSON tree does not works! #95050

mrplayq
Participant

Hello Hristo,
I believe I’m using the right names like “label”, “items”, “checked”, etc. in my json array (please see my original post).
The issue remains that setting the “checked” property of an item to “true” in json loading the tree does not render that item as checked in the UI.
Please post a sample code if you think that works, or tell me what I’m doing wrong.
Thanks.
Russell B.

July 24, 2017 at 9:36 am Setting "checked=true" from JSON tree does not works! #95084
Hristo
Participant
Hello Russell B.,

I tested the example below and it seems to work fine:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree can easily display images next to each item. In order to achieve that, you need to add 'img' element inside a 'li' element." />
    <title id='Description'>
        The jqxTree in this demo displays images next to the tree items.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
            // Create jqxTree
            var source = [
                {
                    icon: "../../images/mailIcon.png", label: "Mail", expanded: true, checked: true, items: [
                        { icon: "../../images/calendarIcon.png", label: "Calendar" },
                        { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                    ]
                },
                {
                    icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                        { icon: "../../images/folder.png", label: "Admin", checked: true },
                        { icon: "../../images/folder.png", label: "Corporate" },
                        { icon: "../../images/folder.png", label: "Finance" },
                        { icon: "../../images/folder.png", label: "Other" },
                    ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes", checked: true },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" }
            ];

            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%', checkboxes: true, hasThreeStates: true });
            $('#jqxTree').jqxTree('selectItem', null);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id='jqxTree'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```
(based on “Default Functionality” demo)
Could try to check the received JSON data, is this correct?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com
July 25, 2017 at 9:00 pm Setting "checked=true" from JSON tree does not works! #95131

mrplayq
Participant

This works fine because the tree is loaded kinda statically in javascript.
Try loading it from a json array similar to my original post and let’s see if that works.
Thanks,
Russell B.

July 26, 2017 at 11:08 am Setting "checked=true" from JSON tree does not works! #95149

Hristo
Participant

Hello Russell B.,

You could try to implement loadError(jqXHR, status, error): callback into your DataAdapter.
Could you try to check your received data? Also, I would like to ask you is there any error message?
Also, I would like to suggest you look at the “Tree with Checkboxes” demo, it could be useful, too.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

August 1, 2017 at 9:53 pm Setting "checked=true" from JSON tree does not works! #95254

mrplayq
Participant

I could not get the column mapping to work with the dataAdapter but instead, I got the default data binding to work by renaming my treeView model’s property names to “label”, “items”, “checked”, etc. And that was the trick, after that loading data from json worked like a charm!

Here’s my working javaScript code:

var loadJqxEcomTree = function () {
try {
var jsonData = jQuery.parseJSON(‘@jsonTreeArray’);
$(‘#treeView’).jqxTree({ source: jsonData, height: ‘480px’, hasThreeStates: true, checkboxes: true, width: ‘100%’ });
$(‘#treeView’).jqxTree(‘expandAll’);
return;
} catch (e) {
alert(e);
}
}

August 2, 2017 at 8:18 am Setting "checked=true" from JSON tree does not works! #95264

Hristo
Participant

Hello Russell B.,

Thank you for the response and for that you share your experience with the community

Best Regards,
Hristo Hristov

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.