JqWidgets treegrid issues wiring up dataAdapter object - jqwidget

Question

I'm in the AngularJS environment, and trying to get a jqWidgets TreeGrid working.
I have the dataAdapter all wired up with the Json formatted data, however the grid renders only one row.
I also have a test treeGrid on the same page, and with sample data, which is working fine.
I'm putting the final Json data setting side-by-side to try and determine where I'm going wrong.
I've used this page as a guide to wire up the treegrid settings, etc. http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm
Here is the html showing the jqx treegrid directive for the "bad" grid:
<jqx-tree-grid jqx-instance="jqGridHierObj" jqx-settings="vm.jqGridHierSettings"></jqx-tree-grid>
And the "bad" Json data tree settings binded vm.jqGridHierSettings (too large to post inline):
http://www.bobmazzo.com/grid/TreeGrid_Data_Bad.txt
and here is the "good" grid with Employee test data :
HTML:
<jqx-tree-grid jqx-instance="jqGridEmpObj" jqx-settings="vm.jqGridEmpSettings"></jqx-grid>
vm.jqGridEmpSettings Json data :
http://www.bobmazzo.com/grid/TreeGrid_Data_Good.txt
and from my Angular controller code, a snippet of the javascript with Json data bindings :
I need help to figure out why the "bad" grid is not working ! And why it only renders one row, where is should be showing a hierarchy of data.
thanks.
Bob

Answer 1

I found the solution. You must define the “children” as an array type in the 'source' object; that is, prior to passing that object into the dataAdapter. See the dataFields property below :
var source = {
dataType: "json",
dataFields: [
{
"name": "id",
"type": "number"
},
{
"name": "field0",
"type": "string"
},
{
"name": "field1",
"type": "number"
},
{
"name": "field2",
"type": "number"
},
{
name: 'children', // MUST DEFINE CHILDREN AS ARRAY TYPE
type: 'array'
},
],
hierarchy: {
root: 'children'
},
id: 'id',
localData: myData
};
var dataAdapter = new $.jqx.dataAdapter(source);