jQWidgets Forums
jQuery UI Widgets › Forums › TreeGrid › JSON Data example modification
Tagged: angular tree, bootstrap tree, javascript tree, jquery tree, jqwidgets tree, jqxtree string id
This topic contains 3 replies, has 2 voices, and was last updated by Christopher 8 years ago.
-
Author
-
Hi,
I tried to change the JSON Data example on the site so it will use the FirstName field as key instead of the EmployeeID,
here’s the code:
<script type="text/javascript"> $(document).ready(function () { var employees = [ { "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": "Andrew", "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" }, { "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": "Andrew", "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" }, { "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": "Andrew", "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." }, { "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": "Andrew", "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." }, { "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": "Andrew", "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" }, { "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": "Steven", "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." }, { "FirstName": "Robert", "LastName": "King", "ReportsTo": "Steven", "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" }, { "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": "Steven", "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." }, { "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": "Steven", "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: 'ReportsTo', type: 'string' }, { 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: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'FirstName' }, parentDataField: { name: 'ReportsTo' } }, id: 'FirstName', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 850, source: dataAdapter, sortable: true, ready: function() { $("#treeGrid").jqxTreeGrid(); }, columns: [ { text: 'FirstName', dataField: 'FirstName', width: 200 }, { text: 'LastName', dataField: 'LastName', width: 200 }, { 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' } ], }); }); </script>
It doesn’t load as expected, just shows all the entries in a table with no nesting.
Hi susduj,
The id must be of type integer for the jqxTreGride to properly create the hierarchy of the records. Why do you need to change the type of the id ? Each record must have a unique ID of type integer to be properly processed by the jqxTreeGrid.
Best Regards,
ChristopherjQWidgets Team
http://www.jqwidgets.comMy database has unique strings as keys, jqxTreeGrid only supports integer ID?
Hi susduj,
Actually the jqxTreeGrid supports String type IDs. Here is a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-grouping.htm?light
Here’s how your code should look if you want the hierarchy to rely on the “Reports to” datafield:
var employees = [ { "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": "Andrew", "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" }, { "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": "Andrew", "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" }, { "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": "Andrew", "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." }, { "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": "Andrew", "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." }, { "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": "Andrew", "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" }, { "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": "Steven", "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." }, { "FirstName": "Robert", "LastName": "King", "ReportsTo": "Steven", "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" }, { "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": "Steven", "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." }, { "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": "Steven", "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: 'ReportsTo', type: 'string' }, { 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: 'BirthDate', type: 'date' } ], hierarchy: { groupingDataFields: [ { name: "ReportsTo" } ] }, id: 'FirstName', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 850, source: dataAdapter, sortable: true, ready: function() { $("#treeGrid").jqxTreeGrid(); }, columns: [ { text: 'FirstName', dataField: 'FirstName', width: 200 }, { text: 'LastName', dataField: 'LastName', width: 200 }, { 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' } ], });
Best Regards,
ChristopherjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.