jQWidgets Forums

jQuery UI Widgets › Forums › Navigation › Tree › JSON mapping for Tree

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 11 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    JSON mapping for Tree Posts
  • April 26, 2014 at 1:12 am JSON mapping for Tree #53608

    robf
    Participant

    Hi,
    I have a question about setting up a tree with JSON. Read through the doc and have it generally working but can’t seem to get the child nodes correct. The JSON code looks like this:

    data =	[{
			"name": "Automotive",
			"parent": null,
			"oid": "9-12",
			"references": ["10-0"],
			"subs": [{
				"name": "Exterior",
				"parent": "9-12",
				"oid": "9-13"
			},
			{
				"name": "Interior",
				"parent": "9-12",
				"oid": "9-14",
				"references": ["9-0", "9-2"],
			}]
		},
		{
			"name": "Home",
			"parent": null,
			"oid": "9-15",
			"references": ["10-0", "10-1"],
			"subs": [{
				"name": "Exterior",
				"parent": "9-15",
				"oid": "9-16"
			},
			{
				"name": "Interior",
				"parent": "9-15",
				"oid": "9-17"
			}]
		}];

    As you can see I am not using “standard” JSON names. I then set up datafield mappings:

    var source =
{
	datatype: "json",
	datafields: [
		{ name: 'id', map: 'oid' },
		{ name: 'parentid', map: 'parent' },
		{ name: 'text', map: 'name' },
		{ name: 'items', map: 'subs' },
		{ name: 'value', map: 'references'},
	 /*   { name: 'text', map: 'items>name' },
		{ name: 'items>value', map: 'references'}*/

	],
	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', theme:'energyblue'});

    The parent nodes appear correct (Automotive, Home) but the child nodes appear as “Item”. Also, the “references” (mapped to value) show (are accessible) for parents but not for children.

    Do I have to do something special in the mapping? I am unsure about this.

    Any help appreciated!

    Thanks.
    Rob

    April 26, 2014 at 5:54 am JSON mapping for Tree #53612

    Peter Stoev
    Keymaster

    Hi Rob,

    jqxTree does not support such advanced binding, but you can load that data within jqxTreeGrid.

    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/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/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            data = [{
                "name": "Automotive",
                "parent": null,
                "oid": "9-12",
                "references": ["10-0"],
                "subs": [{
                    "name": "Exterior",
                    "parent": "9-12",
                    "oid": "9-13"
                },
                {
                    "name": "Interior",
                    "parent": "9-12",
                    "oid": "9-14",
                    "references": ["9-0", "9-2"],
                }]
            },
		    {
		        "name": "Home",
		        "parent": null,
		        "oid": "9-15",
		        "references": ["10-0", "10-1"],
		        "subs": [{
		            "name": "Exterior",
		            "parent": "9-15",
		            "oid": "9-16"
		        },
			    {
			        "name": "Interior",
			        "parent": "9-15",
			        "oid": "9-17"
			    }]
		    }];

            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'name', type: 'string' },                
                    { name: 'subs', type: 'array' },
                ],
                hierarchy:
                {
                    root: 'subs'
                },
                id: 'oid',
                localData: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();

            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 300,
                source: dataAdapter,
                showHeader: false,
                sortable: true,
                columns: [
                  { text: 'name', dataField: 'name'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

    In the above code, I also removed the column’s header so the look and feel matches jqxTree.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    April 29, 2014 at 8:11 pm JSON mapping for Tree #53746

    robf
    Participant

    Hi Peter,
    Thank you. This worked well!

    I am trying to get the “raw” data from the jqxDataAdapter records so that I can display it in a 

     tag.  I set the url and successfully populate the dataAdatpter and subsequently the tree.  I can ask the tree for its source $("#treeGrid").jqxTreeGrid("source") and I get the adapter.  How do I get the "raw" data? -i.e. the data from the original url

I thought I could simply query dataAdapter.records and execute JSON.stringify to get the original data from the objects to populate my 
    .

Thank you.
Robert
    April 29, 2014 at 10:38 pm JSON mapping for Tree #53750

    robf
    Participant

    Hi Peter,
    Thank you. This worked well!

    I am trying to get the “raw” data from the jqxDataAdapter records so that I can display it in a [pre] tag. I set the url and successfully populate the dataAdatpter and subsequently the tree. I can ask the tree for its source $(“#treeGrid”).jqxTreeGrid(“source”) and I get the adapter. How do I get the “raw” data? -i.e. the data from the original url

    I thought I could simply query dataAdapter.records and execute JSON.stringify to get the original data from the objects to populate my [pre].

    Thank you.
    Robert

    April 30, 2014 at 6:02 am JSON mapping for Tree #53756

    Peter Stoev
    Keymaster

    Hi Robert,

    You can save the rawData in the dataAdapter’s downloadComplete callback function as it has a “data” parameter which is the data received from the Ajax call.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.