jqwidgetjqxtreegrid

JqWidgets treegrid issues wiring up dataAdapter object


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


Solution

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