JqWidgets treegrid issues wiring up dataAdapter object

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);