jQuery UI Widgets Forums Navigation Tree Setting "checked=true" from JSON tree does not works!

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

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

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


    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


    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.


    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


    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.


    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


    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);
    }
    }


    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

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

You must be logged in to reply to this topic.