My webservice is returning an array of data like so (obviously there's much more data)
[ { "children": null, "id": "95813", "parent": "-1", "orgName": "ABC", "total": 224422, "bad": 4898 }, { "children": null, "id": "55728", "parent": "95813", "orgName": "DEF", "total": 1146, "bad": 7 } ]
You can see that the parent of the second item identified the ID of the first item. In the HTML I used this code to represent that data:
<igx-tree-grid #treeGrid [data]="data" childDataKey="children" [autoGenerate]="false" [allowFiltering]="true"> <igx-column field="orgName" title="Org Name" dataType="string"></igx-column> <igx-column field="total" title="Total" dataType="number" [filterable]="false"></igx-column> <igx-column field="bad" title="Not Compliant" dataType="number" [filterable]="false"></igx-column> <igx-column field="percent" title="Percent" datatype="number" [filterable]="false"></igx-column> </igx-tree-grid>
When the grid displays though, both those items are toplevel, one isn't inserted under the other.
Please ignore this. I forgot to update the keys to use primary and foreign instead of childDataKey.