jQuery UI Widgets Forums Navigation Tree Output as JSON

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Output as JSON #85418

    mohammad
    Participant

    hi,

    How to get entire tree(id, text, parentid) as a JSON format on a click of a button?

    Output as JSON #85419

    mohammad
    Participant

    hi,

    I’m not able to get all the elements as JSON i.e(parentid and whether its a Group/Leaf)?

    
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang="en">
    <head>
        <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link type="text/css" rel="stylesheet" href="jqwidgets/styles/jqx.light.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/jqxdata.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/jqxbuttons.js"></script>
        
                <script type="text/javascript">
                $(document).ready(function () {
                	
                    var data = [
                                { "id": "2",
                                    "parentid": "1",
                                    "text": "Hot Chocolate",
                                    "value": "$2.3"
                                }, {
                                    "id": "3",
                                    "parentid": "1",
                                    "text": "Peppermint Hot Chocolate",
                                    "value": "$2.3"
                                }, {
                                    "id": "4",
                                    "parentid": "1",
                                    "text": "Salted Caramel Hot Chocolate",
                                    "value": "$2.3"
                                }, {
                                    "id": "5",
                                    "parentid": "1",
                                    "text": "White Hot Chocolate",
                                    "value": "$2.3"
                                }, {
                                    "text": "Chocolate Beverage",
                                    "id": "1",
                                    "parentid": "-1",
                                    "value": "$2.3"
                            }, {
                                    "id": "6",
                                    "text": "Espresso Beverage",
                                    "parentid": "-1",
                                    "value": "$2.3"
                                }, {
                                    "id": "7",
                                    "parentid": "6",
                                    "text": "Caffe Americano",
                                    "value": "$2.3"
                                    }, {
                                    "id": "8",
                                    "text": "Caffe Latte",
                                    "parentid": "6",
                                    "value": "$2.3"
                                }, {
                                    "id": "9",
                                    "text": "Caffe Mocha",
                                    "parentid": "6",
                                    "value": "$2.3"
                                    }, {
                                    "id": "10",
                                    "text": "Cappuccino",
                                    "parentid": "6",
                                    "value": "$2.3"
                                }, {
                                    "id": "11",
                                    "text": "Pumpkin Spice Latte",
                                    "parentid": "6",
                                    "value": "$2.3"
                                    }, {
                                    "id": "12",
                                    "text": "Frappuccino",
                                    "parentid": "-1"
                                }, {
                                    "id": "13",
                                    "text": "Caffe Vanilla Frappuccino",
                                    "parentid": "12",
                                    "value": "$2.3"
                                    }, {
                                    "id": "15",
                                    "text": "450 calories",
                                    "parentid": "13",
                                    "value": "$2.3"
                                }, {
                                    "id": "16",
                                    "text": "16g fat",
                                    "parentid": "13",
                                    "value": "$2.3"
                                    }, {
                                    "id": "17",
                                    "text": "13g protein",
                                    "parentid": "13",
                                    "value": "$2.3"
                                }, {
                                    "id": "14",
                                    "text": "Caffe Vanilla Frappuccino Light",
                                    "parentid": "12",
                                    "value": "$2.3"
                                    }]
                                var source =
                                {
                                    datatype: "json",
                                    datafields: [
                                        { name: 'id' },
                                        { name: 'parentid' },
                                        { name: 'text' },
                                        { name: 'value' }
                                    ],
                                    id: 'id',
                                    localdata: data
                                };
                                var dataAdapter = new $.jqx.dataAdapter(source);
                                dataAdapter.dataBind();
                                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    
                    $('#jqxWidget').jqxTree({ source: records, width: '300px',height: '200px',theme:'light'});
                    $("#Test").jqxButton({theme:'light', template: "info",width: '150', height: '35px' });
            	  	$( "#Test" ).click(function() {
            	         var items = $('#jqxWidget').jqxTree('getItems');
            	         for (var i = 0; i < items.length; i++) {
            	             var item = items[i];
            	             alert(JSON.stringify({id: item.id, text: item.label, pid: item.parentid}));
            	         }
            	 	});
                    
                    
                });
               
           
            </script>
        
        
    </head>
    <body class='default'>
            <div id='jqxWidget'></div>
    <br/>
            <input type="button" value="Get JSON" id="Test" />
    </body>
    </html>
    

    Thanks in advance…

    Regards,
    MZH

    • This reply was modified 7 years, 12 months ago by  mohammad.
    • This reply was modified 7 years, 12 months ago by  mohammad.
    Output as JSON #85432

    Hristo
    Participant

    Hello mohammad,

    Please try to set pid: item.parentId instead of pid: item.parentid.
    Thank you for the interest to our widget.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Output as JSON #85436

    mohammad
    Participant

    Thanks Hristo for your help…Do we have any property/Method to find out its a Group or a Leaf?

    Output as JSON #85459

    Hristo
    Participant

    Hello mohammad,

    Please, take a look this example:
    http://jsfiddle.net/qmmj31eo/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Output as JSON #85463

    mohammad
    Participant

    Dear Hristo,

    It shows “true” for all nodes though it has child or not, Please check…

    Thanks in advance…

    Regards,
    Mohammad

    Output as JSON #85487

    Hristo
    Participant

    Hello mohammad,

    Please, take a look this example:
    http://jsfiddle.net/he367a7h/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Output as JSON #85492

    mohammad
    Participant

    hi Hristo,

    Still its showing wrong result! Please check once before giving the solution.

    Output as JSON #85508

    Hristo
    Participant

    Hello mohammad,

    Sorry for this misunderstanding.
    You could try to use getItems – receive an array with all items and each has ‘parentElement’ member and another details for this.

    • label – gets item’s label.
    • value – gets the item’s value.
    • disabled – gets whether the item is enabled/disabled.
    • checked – gets whether the item is checked/unchecked.
    • element – gets the item’s LI tag.
    • parentElement – gets the item’s parent LI tag.
    • (if the result of ‘parentElement’ is null – this mean it is a root, otherwise it has children)

    • isExpanded – gets whether the item is expanded or collapsed.
    • selected – gets whether the item is selected or not.

    Also could use ‘hasItems’ member to check is this a leaf or not.
    You could find out more details in our API Documentation.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.