Angular treegrid issue with dataAdapter object

[bobmazzoParticipant]

I’m developing in the AngularJS environment, and trying to get the TreeGrid working.

I have the dataAdapter all wired up with the Json formatted data, however the grid renders only one row (where it should render n-levels).

I also have a test treeGrid on the same page, and with sample data, which is working fine.

I’m putting the treegrid settings object side-by-side with the online Employee IDs sample which I have working also in my project. I’m trying to compare min with the good one to see where I’m going wrong.

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

and here is the “good” grid with Employee test data :

HTML:

<jqx-tree-grid jqx-instance="jqGridEmpObj" jqx-settings="vm.jqGridEmpSettings"></jqx-grid>

and the good vm.jqGridEmpSettings Json data :

` vm.jqGridHierSettings = { // jqwidgets grid
altrows: true,
width: 600,
height: 300,
source: (isDynamic ? dataAdapter : myData),
columns: (isDynamic ? myColumns : myColumnsJQ )
};

vm.jqGridEmpSettings = { // Employee Grid Test
altrows: true,
width: 600,
height: 300,
source: daEmp,
columns: empColumns,
};`

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

[bobmazzoParticipant]

I tried embedding link which points to the good and bad Json txt files, and the image as well.

Please go here to see the 3 files which I’ve posted for anyone’s viewing – *Removed Link*

[Peter StoevKeymaster]

Hello,

Please, in your future posts, share jsfiddle.net samples so people would be able to test your code. In addition, do not post links to other external websites, because we will have to remove them. The problem in your code is that you missed an important part of the widget’s initialization and especially:

           {
                         "name": "children",
                         "type": "array"
                    }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bobmazzoParticipant]

Hi Peter,
I just assume that my Json data would be too large for this forum. I’ve also tried to get a jsfiddler working, but find it a bit difficult to get it running (however I’ll keep trying).
thank you for your response. I’ll try type: array.

[bobmazzoParticipant]

Yes, thanks Peter. That worked after defining the “children” as an array type. 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',
                         type: 'array'
                     },
                ],
                hierarchy: {
                    root: 'children',
                    type: 'array'
                },
                id: 'id',
                localData: myData
            };

[bobmazzoParticipant]

working on a jsfiddle example for future reference, but cannot get it to run: http://jsfiddle.net/robertmazzo/8vhnz0Lr/5/

[Author]

Posts