jQWidgets Forums

Tagged: javascript treegrid, jquery treegrid, jqwidgets treegrid, treegrid

This topic contains 7 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 6 months ago.

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

Author

Can TreeGrid display this nested JSON data? Posts
March 4, 2014 at 8:44 pm Can TreeGrid display this nested JSON data? #50484
David
Participant
Hi,

I have a tree of JSON data that I would like to display with the TreeGrid. The difference my data has from the examples is that the child array of each node is the child of another object, as indicated below.

The code below will only display the top level of the tree in the jqxTreeGrid, i.e., “node 0” and “node 2.” So, the ‘map:”children>child”‘ syntax is obviously not working, though the ‘root: “children>child”‘ works. Is there a way to make the TreeGrid correctly display this data as-is? Thanks.
```
var objectTree = {
   "name":"root",
   "children":{
      "child":[
         {
            "@id":0,
            "name":"node 0",
            "children":{
               "child":[
                  {
                     "@id":1,
                     "name":"node 1",
                     "children":{
                        "child":[

                        ]
                     }
                  }
               ]
            }
         },
         {
            "@id":2,
            "name":"node 2",
             "children":{
                "child":[
                  {
                     "@id":3,
                     "name":"node 3",
                     "children":{
                        "child":[
                           {
                              "@id":4,
                              "name":"node 4",
                              "children":{
                                 "child":[

                                 ]
                              }
                           }
                        ]
                     }
                  }
               ]
            }
         }
      ]
   }
};

var source =
{
    datatype: "json",
    datafields: [
        { name: "@id", map: "@id" },
        { name: "name", map: "name" },
        { name: "child", type: "array", map:"children>child" }
    ],
    root: "children>child",
    localData: objectTree,
    id: "@id"
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxTreeGrid({
    width: 400,
    altRows: true,
    source: dataAdapter,
    columns: [
        { text: "ID", datafield: "@id", width: 100 },
        { text: "Name", datafield: "name", width: 300 }
    ]
});
```
March 5, 2014 at 6:26 am Can TreeGrid display this nested JSON data? #50492
Peter Stoev
Keymaster
Hi David,

Here’s a demo which shows how you should build the TreeGrid from that data.
```
<!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 () {
            var objectTree = {
                "name": "root",
                "children": {
                    "child": [
                       {
                           "@id": 0,
                           "name": "node 0",
                           "children": {
                               "child": [
                                  {
                                      "@id": 1,
                                      "name": "node 1",
                                      "children": {
                                          "child": [

                                          ]
                                      }
                                  }
                               ]
                           }
                       },
                       {
                           "@id": 2,
                           "name": "node 2",
                           "children": {
                               "child": [
                                 {
                                     "@id": 3,
                                     "name": "node 3",
                                     "children": {
                                         "child": [
                                            {
                                                "@id": 4,
                                                "name": "node 4",
                                                "children": {
                                                    "child": [

                                                    ]
                                                }
                                            }
                                         ]
                                     }
                                 }
                               ]
                           }
                       }
                    ]
                }
            };

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: "@id", map: "@id" },
                    { name: "name", map: "name" },
                    { name: "children", type: "array" }
                ],
                root: "children>child",
                localData: objectTree,
                hierarchy: {root: "children>child"},
                id: "@id"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#treeGrid").jqxTreeGrid({
                width: 400,
                altRows: true,
                source: dataAdapter,
                columns: [
                    { text: "ID", datafield: "@id", width: 100 },
                    { text: "Name", datafield: "name", width: 300 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
March 5, 2014 at 6:50 pm Can TreeGrid display this nested JSON data? #50535

David
Participant

That works. Thanks, Peter.

November 10, 2014 at 10:14 am Can TreeGrid display this nested JSON data? #62464

learner
Participant

Hello,

I have slightly different situation than this.I have two json data old one and new one separately but of similar nature only the varying the value which I need to display in two different columns. So my question is I have only one source object called local data. So how could I accomplish this getting two different data in different columns. My Json data is as follows:

OLD
{
“workers”: [
{
“catid”: 1,
“catname”: “People”,
“workers”: [
{
“wid”: 10,
“wname”: “NicePeople”
},
{
“wid”: 11,
“wname”: “GreatPeople”
}
]
},
{
“catid”: 2,
“catname”: “Computer”,
“workers”: [
{
“wid”: 12,
“wname”: “Pc”
}
]
}
]
}

NEW

{
“workers”: [
{
“catid”: 1,
“catname”: “People”,
“workers”: [
{
“wid”: 10,
“wname”: “NicePeople”
},
{
“wid”: 11,
“wname”: “GreatPeople 1”
}
]
},
{
“catid”: 2,
“catname”: “Computer”,
“workers”: [
{
“wid”: 12,
“wname”: “Laptop”,
“denomination”:[100,200,300]
}
]
}
]
}

November 10, 2014 at 11:21 am Can TreeGrid display this nested JSON data? #62469

Peter Stoev
Keymaster

Hi learner,

With the TreeGrid, you should use specific JSON format similar to this one:

` var employees = [
{
“EmployeeID”: 2, “FirstName”: “Andrew”, “LastName”: “Fuller”, “Country”: “USA”, “Title”: “Vice President, Sales”, “HireDate”: “1992-08-14 00:00:00”, “BirthDate”: “1952-02-19 00:00:00”, “City”: “Tacoma”, “Address”: “908 W. Capital Way”, “expanded”: “true”,
children: [
{ “EmployeeID”: 8, “FirstName”: “Laura”, “LastName”: “Callahan”, “Country”: “USA”, “Title”: “Inside Sales Coordinator”, “HireDate”: “1994-03-05 00:00:00”, “BirthDate”: “1958-01-09 00:00:00”, “City”: “Seattle”, “Address”: “4726 – 11th Ave. N.E.” },
{ “EmployeeID”: 1, “FirstName”: “Nancy”, “LastName”: “Davolio”, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1992-05-01 00:00:00”, “BirthDate”: “1948-12-08 00:00:00”, “City”: “Seattle”, “Address”: “507 – 20th Ave. E.Apt. 2A” },
{ “EmployeeID”: 3, “FirstName”: “Janet”, “LastName”: “Leverling”, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1992-04-01 00:00:00”, “BirthDate”: “1963-08-30 00:00:00”, “City”: “Kirkland”, “Address”: “722 Moss Bay Blvd.” },
{ “EmployeeID”: 4, “FirstName”: “Margaret”, “LastName”: “Peacock”, “Country”: “USA”, “Title”: “Sales Representative”, “HireDate”: “1993-05-03 00:00:00”, “BirthDate”: “1937-09-19 00:00:00”, “City”: “Redmond”, “Address”: “4110 Old Redmond Rd.” },
{
“EmployeeID”: 5, “FirstName”: “Steven”, “LastName”: “Buchanan”, “Country”: “UK”, “Title”: “Sales Manager”, “HireDate”: “1993-10-17 00:00:00”, “BirthDate”: “1955-03-04 00:00:00”, “City”: “London”, “Address”: “14 Garrett Hill”, “expanded”: “true”,
children: [
{ “EmployeeID”: 6, “FirstName”: “Michael”, “LastName”: “Suyama”, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1993-10-17 00:00:00”, “BirthDate”: “1963-07-02 00:00:00”, “City”: “London”, “Address”: “Coventry House Miner Rd.” },
{ “EmployeeID”: 7, “FirstName”: “Robert”, “LastName”: “King”, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1994-01-02 00:00:00”, “BirthDate”: “1960-05-29 00:00:00”, “City”: “London”, “Address”: “Edgeham Hollow Winchester Way” },
{ “EmployeeID”: 9, “FirstName”: “Anne”, “LastName”: “Dodsworth”, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1994-11-15 00:00:00”, “BirthDate”: “1966-01-27 00:00:00”, “City”: “London”, “Address”: “7 Houndstooth Rd.” }
]
}
]
}
];

// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘EmployeeID’, type: ‘number’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘HireDate’, type: ‘date’ },
{ name: ‘children’, type: ‘array’ },
{ name: ‘expanded’, type: ‘bool’ },
{ name: ‘BirthDate’, type: ‘date’ }
],
hierarchy:
{
root: ‘children’
},
id: ‘EmployeeID’,
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$(“#treeGrid”).jqxTreeGrid(
{
width: 850,
source: dataAdapter,
sortable: true,
columns: [
{ text: ‘FirstName’, dataField: ‘FirstName’, width: 200 },
{ text: ‘LastName’, dataField: ‘LastName’, width: 120 },
{ text: ‘Title’, dataField: ‘Title’, width: 160 },
{ text: ‘Birth Date’, dataField: ‘BirthDate’, cellsFormat: ‘d’, width: 120 },
{ text: ‘Hire Date’, dataField: ‘HireDate’, cellsFormat: ‘d’, width: 120 },
{ text: ‘Address’, dataField: ‘Address’, width: 250 },
{ text: ‘City’, dataField: ‘City’, width: 120 },
{ text: ‘Country’, dataField: ‘Country’ }
]
});
`

This means that you’ll have to slightly modify your JSON before trying to load it in the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 10, 2014 at 2:35 pm Can TreeGrid display this nested JSON data? #62476

learner
Participant

Hi Peter, Thanks for the quick reply. But my situation is different, I don’t get all data at a time and cannot render it at once.I have two separate json data as old json and new json. What I need to do is display two different data as old data and new data in separate columns in a single grid so that I can point out the differences between the data.How will I accomplish this.I need the grid to display like this.

old new
people people
nice people nice people
great people great people1
computer computer
PC laptop

November 10, 2014 at 10:44 pm Can TreeGrid display this nested JSON data? #62492

learner
Participant

Hello Peter or anyone else there am I being able to explain my situation?

November 11, 2014 at 6:04 am Can TreeGrid display this nested JSON data? #62498

Peter Stoev
Keymaster

Hi learner,

You cannot display two different JSON files/Objects in one TreeGrid. You will have to merge these into 1 and the result should be a JSON similar to the sample I sent you. Otherwise, you would not be able to populate the TreeGrid with that data.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.