jQWidgets Forums

Tagged: treeview control

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

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

Author

Tree JSON Posts
August 15, 2013 at 12:53 pm Tree JSON #26886

simcon94
Participant

He,
i have a problem with the presentation of the Tree.
The Tree is loading with JSON.
So looks my JSON:

[{“Id”:”be448add-eb26-4f9c-9313-a21800e61e07″,”Name”:”Test”,”ParentId”:”00000000-0000-0000-0000-000000000000″
},{“Id”:”69da609e-7ef9-4f02-982c-a21800e675ef”,”Name”:”Test 1″,”ParentId”:”be448add-eb26-4f9c-9313-a21800e61e07″
},{“Id”:”f053819e-87a4-404a-9cce-a21800e69894″,”Name”:”Test 1-2″,”ParentId”:”69da609e-7ef9-4f02-982c-a21800e675ef”
},{“Id”:”7938d9cd-96ba-4cc8-b030-a21800e6b00c”,”Name”:”Test 1-3″,”ParentId”:”69da609e-7ef9-4f02-982c-a21800e675ef”}]

But it looks like:
Test
Test1
Test 1-2
Test 1-3

But it should be look like this:
Test
——Test1
——Test 1-2
——Test 1-3

Like your Demo with JSON (Frappucino)

Thats my Code:
var source =
{
datatype: “json”
,async: false
,datafields: [
{ name: ‘Id’ }
,{ name: ‘ParentId’ }
,{ name: ‘Name’ }
],
id: ‘Id’
,url: sk.appHelper.getAppDomainAppVirtualPath() + “/Tree/GetTree”
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// get the tree items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
// the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
// specifies the mapping between the ‘text’ and ‘label’ fields.

var records = dataAdapter.getRecordsHierarchy(‘Id’, ‘ParentId’, ‘items’, [{ name: ‘Name’, map: ‘label’ }]);
$(‘#topTree’).jqxTree({ source: records, checkboxes: true, width: ‘300px’, height: “200px” });

August 15, 2013 at 4:04 pm Tree JSON #26899
Peter Stoev
Keymaster
Hi simcon94,

Please, find below a working sample based on your JSON data:
```
<!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>
    <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" />
    <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 = "";
                var data = [{
                    "Id": "be448add-eb26-4f9c-9313-a21800e61e07", "Name": "Test", "ParentId": "00000000-0000-0000-0000-000000000000"
                }, {
                    "Id": "69da609e-7ef9-4f02-982c-a21800e675ef", "Name": "Test 1", "ParentId": "be448add-eb26-4f9c-9313-a21800e61e07"
                }, {
                    "Id": "f053819e-87a4-404a-9cce-a21800e69894", "Name": "Test 1-2", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef"
                }, { "Id": "7938d9cd-96ba-4cc8-b030-a21800e6b00c", "Name": "Test 1-3", "ParentId": "69da609e-7ef9-4f02-982c-a21800e675ef" }];
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Id' },
                        { name: 'ParentId' },
                        { name: 'Name' }
                    ],
                    id: 'Id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                var records = dataAdapter.getRecordsHierarchy('Id', 'ParentId', 'items', [{ name: 'Name', map: 'label' }]);
                $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>
```
There is also a missing ‘,’ after async in your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
August 16, 2013 at 6:25 am Tree JSON #26924

simcon94
Participant

Thats the same effect.
I want have the effect, like in your demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treebindingtojson.htm

My Tress should be display like the FRAPPUCINO entry.

Test and Test1 not on the same level.

August 16, 2013 at 6:28 am Tree JSON #26927

Peter Stoev
Keymaster

Hi simcon94,

Please, try the sample I posted in the previous post using the current version. The Hierarchy of the Tree is built as in our online sample.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 16, 2013 at 7:03 am Tree JSON #26932

simcon94
Participant

Sorry, but it is still not displying like in your demo.
Could it be about the theme or css File?

I copied your demo code into my html file. But i didn`t have an hierachical tree

August 16, 2013 at 7:15 am Tree JSON #26935

Peter Stoev
Keymaster

Hi simcon94,

It could be only from old version or some browser cache. Here’s online version of that code: http://jsfiddle.net/jqwidgets/YYpMg/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 16, 2013 at 2:05 pm Tree JSON #26978

simcon94
Participant

Ok. I found the error.
We have one css file, the overrides the ul tag…..OMG…..

Thanks for your support.

September 2, 2013 at 8:03 am Tree JSON #28139

simcon94
Participant

New Problem.
When i click in the Tree, how will i get the Id of the Node?

September 2, 2013 at 8:15 am Tree JSON #28140

simcon94
Participant

I have the same problem like:
http://www.jqwidgets.com/community/topic/getting-the-selected-item-from-the-original-source-constructor-argument/

September 2, 2013 at 10:16 am Tree JSON #28151

Peter Stoev
Keymaster

Hi simcon94,

“data” is not supported as member. “id” is.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 2, 2013 at 11:12 am Tree JSON #28157

simcon94
Participant

Ok. Thanks.
And how can i add icons to Tree with Json?

September 2, 2013 at 11:27 am Tree JSON #28158

Peter Stoev
Keymaster

Hi simcon94,

The “icon” member specifies the source of the icon as shown in the Tree’s demos – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/defaultfunctionality.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 2, 2013 at 1:28 pm Tree JSON #28164

simcon94
Participant

I implemnted on this way..
var source =
{
datatype: “json”
,async: false
,datafields: [
{ name: ‘Id’ }
, { name: ‘ParentId’ }
, { name: ‘Name’ }
]
, id: ‘Id’
, icon: sk.appHelper.getAppDomainAppVirtualPath() + ‘/Content/icons/factory.png’
, url: sk.appHelper.getAppDomainAppVirtualPath() + “/Topology/GetTopologyTree”
};

But its still not showing the icon.

And i have one more question.
Is it possible, to set the source into jqxDropDownButton?
Do you have an example?

September 2, 2013 at 1:38 pm Tree JSON #28166

Peter Stoev
Keymaster

Hi simcon94,

– Your data source does not have “icon” data field as far as I see from the posted code. The fields that you want to be loaded from your data source should be defined in the datafields array of the source object.
– jqxTree and jqxDropDownButton are different widgets. jqxDropDownButton displays any content in a Popup and setting the Tree’s source is not related to jqxDropDownButton. Just initialize your Tree which is inside the jqxDropDownButton’s Popup as you do it normally.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.