jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

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

Author

Unable to display Json tree Posts

August 25, 2013 at 8:05 pm Unable to display Json tree #27639

marcb

Member

If I follow the JSON tree example (at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treebindingtojson.htm) using my own Json data I am unable to display a tree. Instead of a tree I get an empty page and an error in firebug console tab:

————————————
TypeError: invalid ‘in’ operand e
…nction(e){var t,n=””,r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if(“string”…

jquery.min.js (line 4)
————————————

Here is my code:

index.html
—————————————

Hello Collection

—————————————

/js/app.js
—————————————
$(document).ready(function(){
var theme = ‘energyblue’;
var data = [{
“id”: 2,
“parentid”: “1”,
“label”:”Oorsprong”,
“value”: “origin”,
“items”: [
{
“id”: “6”,
“parentid”: “2”,
“label”:”Bali”,
“value”: “bali”,
“items”:[]
}
]
},{
“id”: “3”,
“parentid”: “1”,
“label”:”Haartooi”,
“value”: “hairdo”,
“items”:[]
},{
“id”: “4”,
“parentid”: “1”,
“label”:”Neus”,
“value”: “nose”,
“items”:[]
},{
“id”: “5”,
“parentid”: “1”,
“label”:”personage”,
“value”: “avatar”,
“items”:[]
}];

var source = {
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘label’ },
{ name: ‘value’ }
],
id: “id”,
localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’,’label’);
console.log(records);
$(“#tree”).jqxTree({
source: records,
width: ‘300px’,
theme: ‘energyblue’
});

});
—————————————
The page displays the 2 divs (“frame_left” and “frame_center”) on top of the the div “container” background) but I do not see a tree.
I suspect the line

var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’,’label’);

is wrong because when I console.log(records) I see “undefined” in firebug…

Can anyone see what’s wrong here?

Thanks,

Marc

August 26, 2013 at 7:10 am Unable to display Json tree #27658

Dimitar

Participant

Hello Marc,

Here is how it should be:

<!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.10.1.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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var data = [{
                    "id": "1",
                    "text": "Oorsprong",
                    "parentid": "-1",
                    "value": "origin"
                },
                {
                    "id": "2",
                    "text": "Bali",
                    "parentid": "1",
                    "value": "bali"
                },
                {
                    "id": "3",
                    "text": "Haartooi",
                    "parentid": "-1",
                    "value": "hairdo"
                }, {
                    "id": "4",
                    "parentid": "-1",
                    "text": "Neus",
                    "value": "nose"
                }, {
                    "id": "5",
                    "text": "personage",
                    "parentid": "-1",
                    "value": "avatar"
                }];
                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'}]);
                $("#tree").jqxTree({
                    source: records,
                    width: '300px',
                    theme: 'energyblue'
                });
            });
        </script>
        <div id='tree'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.