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 empty data but shows columns (see attached image).
I'm using this non Angular-based demo as a guide to wire up the dataAdapter:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm#demos/jqxtreegrid/javascript-tree-grid-binding-to-json.htm
because this Angular sample is too simple (i.e. doesn't use the dataAdapter object) -
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm
Here's the html snippet:
<div class="widget-content user">
<jqx-treegrid jqx-instance="jqGridHierObj" jqx-settings="vm.jqGridHierSettings">
</jqx-treegrid>
</div>
Here's what my treegrid settings look like, complete with data and model.
It appears that JQ is injecting the additional "_source" property because I'm certainly not. There also an extra "localdata" property. ex/ I've added the "localData" property:
{
"altrows": true,
"width": 600,
"height": 300,
"source": {
"_source": {
"datatype": "json",
"id": "id",
"datafields": {
"field0": {
"type": "string"
},
"field1": {
"type": "number"
},
"field2": {
"type": "number"
}
},
"hierarchy": {
"keyDataField": {
"name": "id"
},
"parentDataField": {
"name": "parent"
}
},
"localData": [
{
"id": 0,
"parent": 29,
"field0": "Goldman",
"field1": 0,
"field2": 0
},
{
"id": 1,
"parent": 29,
"field0": "IBM",
"field1": 0,
"field2": 0
},
{
"id": 2,
"parent": 29,
"field0": "JP Chase",
"field1": 0,
"field2": 0
},
{
"id": 3,
"parent": 34,
"field0": "MINESCONDIDA",
"field1": 0,
"field2": 0
},
{
"id": 4,
"parent": 29,
"field0": "Merrill",
"field1": 0,
"field2": 0
},
{
"id": 5,
"parent": 29,
"field0": "Nokia",
"field1": 0,
"field2": 0
},
{
"id": 6,
"parent": 29,
"field0": "Pequot",
"field1": 0,
"field2": 0
},
{
"id": 7,
"parent": 35,
"field0": "Pimco Fund A",
"field1": 0,
"field2": 0
},
{
"id": 8,
"parent": 35,
"field0": "Pimco Fund B",
"field1": 0,
"field2": 0
},
{
"id": 9,
"parent": 29,
"field0": "Deutsche",
"field1": 0,
"field2": 0
},
{
"id": 10,
"parent": 13,
"field0": "Ditech",
"field1": 0,
"field2": 0
},
{
"id": 11,
"parent": 32,
"field0": "GM Isuzu",
"field1": 0,
"field2": 0
},
{
"id": 12,
"parent": 32,
"field0": "GM Opel",
"field1": 0,
"field2": 0
},
{
"id": 13,
"parent": 32,
"field0": "GMAC",
"field1": 0,
"field2": 0
},
{
"id": 14,
"parent": 13,
"field0": "GMAC Insurance",
"field1": 0,
"field2": 0
},
{
"id": 15,
"parent": 0,
"field0": "GSAM",
"field1": 0,
"field2": 0
},
{
"id": 16,
"parent": 29,
"field0": "General Insurance",
"field1": 0,
"field2": 0
},
{
"id": 17,
"parent": 33,
"field0": "Genworth",
"field1": 0,
"field2": 0
},
{
"id": 18,
"parent": 29,
"field0": "AIG",
"field1": 0,
"field2": 0
},
{
"id": 19,
"parent": 29,
"field0": "Andor",
"field1": 0,
"field2": 0
},
{
"id": 20,
"parent": 29,
"field0": "BARCLAYS",
"field1": 92.7731197209214,
"field2": -10.1717767200607
},
{
"id": 21,
"parent": 30,
"field0": "BHHSH",
"field1": 0,
"field2": 0
},
{
"id": 22,
"parent": 30,
"field0": "BHPBFIN",
"field1": 0,
"field2": 0
},
{
"id": 23,
"parent": 31,
"field0": "BHPSTEEUR",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 24,
"parent": 31,
"field0": "BHPSUS",
"field1": 0,
"field2": 0
},
{
"id": 25,
"parent": 31,
"field0": "BLUESCOPEFIN",
"field1": 0,
"field2": 0
},
{
"id": 26,
"parent": 29,
"field0": "CSFB",
"field1": 3.35029024626419,
"field2": -0.367366071961442
},
{
"id": 27,
"parent": 29,
"field0": "BLOSOFL",
"field1": 0,
"field2": 0
},
{
"id": 28,
"parent": 29,
"field0": "GRMOBND",
"field1": 0,
"field2": 0
},
{
"id": 29,
"field0": "$ALL$",
"field1": 1564.92711931719,
"field2": -171.934775655824
},
{
"id": 30,
"parent": 34,
"field0": "BHPBGRP",
"field1": 0,
"field2": 0
},
{
"id": 31,
"parent": 34,
"field0": "BHPSTEELGRP",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 32,
"parent": 29,
"field0": "GM",
"field1": 0,
"field2": 0
},
{
"id": 33,
"parent": 29,
"field0": "GE",
"field1": 0,
"field2": 0
},
{
"id": 34,
"parent": 29,
"field0": "BHPBMGRP",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 35,
"parent": 29,
"field0": "PIMCO",
"field1": 0,
"field2": 0
}
],
"localdata": [
{
"id": 0,
"parent": 29,
"field0": "Goldman",
"field1": 0,
"field2": 0
},
{
"id": 1,
"parent": 29,
"field0": "IBM",
"field1": 0,
"field2": 0
},
{
"id": 2,
"parent": 29,
"field0": "JP Chase",
"field1": 0,
"field2": 0
},
{
"id": 3,
"parent": 34,
"field0": "MINESCONDIDA",
"field1": 0,
"field2": 0
},
{
"id": 4,
"parent": 29,
"field0": "Merrill",
"field1": 0,
"field2": 0
},
{
"id": 5,
"parent": 29,
"field0": "Nokia",
"field1": 0,
"field2": 0
},
{
"id": 6,
"parent": 29,
"field0": "Pequot",
"field1": 0,
"field2": 0
},
{
"id": 7,
"parent": 35,
"field0": "Pimco Fund A",
"field1": 0,
"field2": 0
},
{
"id": 8,
"parent": 35,
"field0": "Pimco Fund B",
"field1": 0,
"field2": 0
},
{
"id": 9,
"parent": 29,
"field0": "Deutsche",
"field1": 0,
"field2": 0
},
{
"id": 10,
"parent": 13,
"field0": "Ditech",
"field1": 0,
"field2": 0
},
{
"id": 11,
"parent": 32,
"field0": "GM Isuzu",
"field1": 0,
"field2": 0
},
{
"id": 12,
"parent": 32,
"field0": "GM Opel",
"field1": 0,
"field2": 0
},
{
"id": 13,
"parent": 32,
"field0": "GMAC",
"field1": 0,
"field2": 0
},
{
"id": 14,
"parent": 13,
"field0": "GMAC Insurance",
"field1": 0,
"field2": 0
},
{
"id": 15,
"parent": 0,
"field0": "GSAM",
"field1": 0,
"field2": 0
},
{
"id": 16,
"parent": 29,
"field0": "General Insurance",
"field1": 0,
"field2": 0
},
{
"id": 17,
"parent": 33,
"field0": "Genworth",
"field1": 0,
"field2": 0
},
{
"id": 18,
"parent": 29,
"field0": "AIG",
"field1": 0,
"field2": 0
},
{
"id": 19,
"parent": 29,
"field0": "Andor",
"field1": 0,
"field2": 0
},
{
"id": 20,
"parent": 29,
"field0": "BARCLAYS",
"field1": 92.7731197209214,
"field2": -10.1717767200607
},
{
"id": 21,
"parent": 30,
"field0": "BHHSH",
"field1": 0,
"field2": 0
},
{
"id": 22,
"parent": 30,
"field0": "BHPBFIN",
"field1": 0,
"field2": 0
},
{
"id": 23,
"parent": 31,
"field0": "BHPSTEEUR",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 24,
"parent": 31,
"field0": "BHPSUS",
"field1": 0,
"field2": 0
},
{
"id": 25,
"parent": 31,
"field0": "BLUESCOPEFIN",
"field1": 0,
"field2": 0
},
{
"id": 26,
"parent": 29,
"field0": "CSFB",
"field1": 3.35029024626419,
"field2": -0.367366071961442
},
{
"id": 27,
"parent": 29,
"field0": "BLOSOFL",
"field1": 0,
"field2": 0
},
{
"id": 28,
"parent": 29,
"field0": "GRMOBND",
"field1": 0,
"field2": 0
},
{
"id": 29,
"field0": "$ALL$",
"field1": 1564.92711931719,
"field2": -171.934775655824
},
{
"id": 30,
"parent": 34,
"field0": "BHPBGRP",
"field1": 0,
"field2": 0
},
{
"id": 31,
"parent": 34,
"field0": "BHPSTEELGRP",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 32,
"parent": 29,
"field0": "GM",
"field1": 0,
"field2": 0
},
{
"id": 33,
"parent": 29,
"field0": "GE",
"field1": 0,
"field2": 0
},
{
"id": 34,
"parent": 29,
"field0": "BHPBMGRP",
"field1": 1468.80370935,
"field2": -161.395632863801
},
{
"id": 35,
"parent": 29,
"field0": "PIMCO",
"field1": 0,
"field2": 0
}
]
},
"_options": {},
"records": [],
"_downloadComplete": [],
"_bindingUpdate": []
},
"columns": [
{
"dataField": "field0",
"text": "Counterparty"
},
{
"dataField": "field1",
"text": "SUM(CDSStress A:USD 10Y X -1.25)"
},
{
"dataField": "field2",
"text": "SUM(CDSStress A:USD 10Y X 1.25)"
}
]
}
and in my controller code, the grid function :
function initHierarchyGrid_Generic(reportType, isHierarchy, isDynamic) {
isDynamic = (isDynamic == undefined ? false : isDynamic);
if (isDynamic) {
// in this case we have saved everything to $rootScope
myModel = $rootScope.reptWizard.modelDef;
myColumns = $rootScope.reptWizard.colDefs;
myData = $rootScope.reptWizard.aggrResults;
}
// add Json data onto myModel object; define jqWidgets data adapter
myModel["localData"] = myData;
var dataAdapter = new $.jqx.dataAdapter(myModel);
var ds = {
schema: {
model: myModel
},
pageSize: 10,
data: dataAdapter
};
$scope.jqGridHierObj = {}; // object reference
vm.jqGridHierSettings = { // jqwidgets grid
altrows: true,
width: 600,
height: 300,
source: myData,
columns: myColumns
};
return vm.jqGridHierSettings;
}
* UPDATE *
I seems like my dataAdapter definition is causing the localData data array to be nested in their object. Here's where I found localData in f12 console tools. It must be wrong :
* UPDATE 2 * Trying to get a jsfiddle working, but having a bit of trouble :
http://jsfiddle.net/L9530s43/2/
vm.jqGridHierSettings.source._source.source._source.localData
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/V1gif.png', '推荐 傲 的文章《JQWidgets treegrid with dataAdapter not rendering》','https://www.manongdao.com/article-1438042.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}