javascriptjqueryjqgridtreegrid
JQgrid - treegrid error
I have looked at the related question This question
and have tried to apply to my tasks. I get headers of the grid with some hanging bubble over it that says "Loading..." and nothing happens. When I run console, in there I see an error that says this:
SCRIPT5007: Unable to get value of the property 'stype': object is null or undefined
jquery.jqGrid.min.js, line 72 character 461
Like this: 
1) The solution presented by Oleg works great out of the box. That is with his json and his javascript. Thanks.
2) I have a Json data that looks similar to the one used by Oleg. Here it is
{
"results":[
{
"analysisStatus":null,
"label":"SPR - Test Only - Cost Analyzer 1-GUI Prototype",
"leaf":false,
"level":0,
"lockedBy":"",
"overrideCostingMRC":955.2800,
"overrideCostingNRC":3739.7900,
"overrideCostingUsage":151.7300,
"overridePricingMRC":1531.4800,
"overridePricingNRC":2580.0000,
"overridePricingUsage":210.4800,
"parent":"",
"proposedCostingMRC":955.2800,
"proposedCostingNRC":3739.7900,
"proposedCostingUsage":151.7300,
"proposedPricingMRC":1531.4800,
"proposedPricingNRC":2580.0000,
"proposedPricingUsage":210.4800,
"rowId":36624,
"standardCostingMRC":955.2800,
"standardCostingNRC":3739.7900,
"standardCostingUsage":151.7300,
"standardPricingMRC":1531.4800,
"standardPricingNRC":2580.0000,
"standardPricingUsage":210.4800
},
{
"label":"Broadspeed DIA 3.0: 1.5 Mb\/s",
"leaf":false,
"level":1,
"overrideCostingMRC":299.9400,
"overrideCostingNRC":118.4400,
"overrideCostingUsage":0.0000,
"overridePricingMRC":444.0000,
"overridePricingNRC":800.0000,
"overridePricingUsage":0.0000,
"parent":36624,
"proposedCostingMRC":299.9400,
"proposedCostingNRC":118.4400,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":444.0000,
"proposedPricingNRC":800.0000,
"proposedPricingUsage":0.0000,
"rowId":54130,
"standardCostingMRC":299.9400,
"standardCostingNRC":118.4400,
"standardCostingUsage":0.0000,
"standardPricingMRC":444.0000,
"standardPricingNRC":800.0000,
"standardPricingUsage":0.0000
},
{
"label":"Broadview PRI: Measured GR",
"leaf":false,
"level":1,
"overrideCostingMRC":298.1700,
"overrideCostingNRC":208.0000,
"overrideCostingUsage":115.7600,
"overridePricingMRC":409.6800,
"overridePricingNRC":800.0000,
"overridePricingUsage":210.4800,
"parent":36624,
"proposedCostingMRC":298.1700,
"proposedCostingNRC":208.0000,
"proposedCostingUsage":115.7600,
"proposedPricingMRC":409.6800,
"proposedPricingNRC":800.0000,
"proposedPricingUsage":210.4800,
"rowId":54131,
"standardCostingMRC":298.1700,
"standardCostingNRC":208.0000,
"standardCostingUsage":115.7600,
"standardPricingMRC":409.6800,
"standardPricingNRC":800.0000,
"standardPricingUsage":210.4800
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":234.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54130,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":388316,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":40.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54130,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404097,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":0.0000,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54131,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.0000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404098,
"standardCostingMRC":0.0000,
"standardCostingNRC":20.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
},
{
"label":"Wild Card - Customer",
"leaf":true,
"level":2,
"overrideCostingMRC":0.0000,
"overrideCostingNRC":0.0000,
"overrideCostingUsage":0.0000,
"overridePricingMRC":3.25,
"overridePricingNRC":0.0000,
"overridePricingUsage":0.0000,
"parent":54131,
"proposedCostingMRC":0.0000,
"proposedCostingNRC":0.0000,
"proposedCostingUsage":0.0000,
"proposedPricingMRC":0.3000,
"proposedPricingNRC":0.0000,
"proposedPricingUsage":0.0000,
"rowId":404099,
"standardCostingMRC":0.0000,
"standardCostingNRC":0.0000,
"standardCostingUsage":0.0000,
"standardPricingMRC":0.0000,
"standardPricingNRC":0.0000,
"standardPricingUsage":0.0000
}
] }
My javascript code with the defined grid looks like this:
<script type="text/javascript">
$(document).ready(function (){
$.getJSON('sources/cost-analyzer2.json', function(data){
console.log(data.results);
var this_grid;
this_grid = $this_app.define_grid("#grid-results", {
caption: 'Proposals',
pager: '#pager-results',
data: $.extend(true, [], data.results),
datatype: "local",
height: 'auto',
rowNumbers: true,
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC',
'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
],
colModel: [
{ name: 'rowId', index: 'rowId', width: 20, hidden:true},
{ name: 'label', index: 'abel', width: 100},
{ name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
{ name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
{ name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
{ name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
{ name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
{ name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
{ name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
{ name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
{ name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
{ name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
{ name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
{ name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70}
],
localReader: {
repeatitems: false,
root: "data.results"
},// end of localReader
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
inline_editing: false
});// end of define_grid -->
$("#grid-results").jqGrid('gridResize');
$("#grid-results").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 6, titleText: 'Standard'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 6, titleText: 'Proposed'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 6, titleText: 'Override'}
]
});
$("#grid-results").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'standardPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'standardPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'proposedPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'proposedPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'overridePricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'overridePricingUsage', numberOfColumns: 2, titleText: 'Usage'}
]
});
}); <!-- end of getJSon() -->
});<!-- end of ready() -->
</script>
If I remove the following lines, I will see my data in a grid fine, but with NO TREE.
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
Can anyone help? what am I doing wrong?
Thanks
Solution
I have resolved this problem. Apparently, it is required for the id column to be called actually "id" and not driven by how my data is. I had to change the back end to get the names properly. Also, it was requiring the dataobject that maps to json data to have a method getIsLeaf, instead of how Java (back end) commonly creates getter for booleans - just isLeaf().
The only problem remains, is that the tree seems a little crooked. if I have two rows, and expand the first one, the expanded subtree appears underneath the last element of the grid.
Updated javascript code is here.
<script type="text/javascript">
$(document).ready(function (){
var mydata ;
$.getJSON('sources/cost-analyzer2.json', function(data){
mydata=$.extend(true, [], data.results) ;
console.log(mydata);
$("#grid-results").jqGrid({
datatype: "local",
data: mydata, // will not used at the loading,
// but during expanding/collapsing the nodes
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC',
'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
],
colModel: [
{ name: 'id', index: 'id', width: 20, hidden:true},
{ name: 'label', index: 'label', width: 100},
{ name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
{ name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
{ name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
{ name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
{ name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
{ name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
{ name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
{ name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
{ name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
{ name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
{ name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
{ name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
{ name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
{ name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
{ name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70}
],
height:'auto',
//pager : "#ptreegrid",
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',
caption: "Sample Tree View Model"
});
$("#grid-results")[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
$("#grid-results").jqGrid('gridResize');
});
});
</script>
Any idea why it is so? Also does anyone know if the events were implemented on Jqgrid - tree?
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices