Problem jqxgrid nested

[kenioParticipant]

hello,
i have a problem using jqxgrid:
i used the jqxgrid for having three levels. The first two level is ok the third lost data.
Can you help me please?

This is my code :

<script type=”text/javascript”>
$(document).ready(function () {

var url = “PHP/Metadati_qualita_gen.php?metadati=RaggruppProject”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘PROJECT’ },
{ name: ‘L1’, type: ‘number’ },
{ name: ‘L2’, type: ‘number’ },
{ name: ‘L3’, type: ‘number’ },
{ name: ‘L4’, type: ‘number’ },
{ name: ‘TOTALE’, type: ‘number’ },
],
id: ‘PROJECT’,
//async: false,
url: url

};

var orderdetailsurl = “PHP/Metadati_qualita_gen.php?metadati=RaggruppCategory”;
var ordersSource =
{
datafields: [
{ name: ‘PROJECT’ },
{ name: ‘CATEGORY’ },
{ name: ‘L1’, type: ‘number’ },
{ name: ‘L2’, type: ‘number’ },
{ name: ‘L3’, type: ‘number’ },
{ name: ‘L4’, type: ‘number’ },
{ name: ‘TOTALE’, type: ‘number’ },
],
// root: “DATAMART”,
// record: “DATAMART”,

id: ‘CATEGORY’,
datatype: “json”,
url: orderdetailsurl,
async: false
};

var orderdetailsurl2 = “PHP/Metadati_qualita_gen.php?metadati=RaggruppJob”;
var ordersSource2 =
{
datafields: [
{ name: ‘PROJECT’ },
{ name: ‘CATEGORY’ },
{ name: ‘JOB’ },
{ name: ‘L1’, type: ‘number’ },
{ name: ‘L2’, type: ‘number’ },
{ name: ‘L3’, type: ‘number’ },
{ name: ‘L4’, type: ‘number’ },
{ name: ‘TOTALE’, type: ‘number’ },
],
// root: “DATAMART”,
// record: “DATAMART”,
id: ‘JOB’,
datatype: “json”,
url: orderdetailsurl2,
async: false
};

var employeesAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
var ordersDataAdapter2 = new $.jqx.dataAdapter(ordersSource2, { autoBind: true });

var orders2 = ordersDataAdapter2.records;
// console.log(orders2);

var nestedGrids2 = new Array();
// create nested grid.
var initrowdetails2 = function (index, parentElement, gridElement, record ) {
var id = record.uid.toString();
//console.log(id);
var grid = $($(parentElement).children()[0]);
nestedGrids2[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid2 = [];
for (var m = 0; m < orders2.length; m++) {
var result = filter.evaluate(orders2[m][“CATEGORY”]);
//console.log(orders2[m][“CATEGORY”]);
if (result)
ordersbyid2.push(orders[m]);
}

var orderssource2 = { datafields: [
{ name: ‘PROJECT’ },
{ name: ‘CATEGORY’ },
{ name: ‘JOB’ },
{ name: ‘L1’, type: ‘number’ },
{ name: ‘L2’, type: ‘number’ },
{ name: ‘L3’, type: ‘number’ },
{ name: ‘L4’, type: ‘number’ },
{ name: ‘TOTALE’, type: ‘number’ },
],

localdata: ordersbyid2
}

console.log(orderssource2);
var nestedGridAdapter2 = new $.jqx.dataAdapter(orderssource2);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter2, width: ‘60%’,
theme: ‘darkblue’,
sortable: true,
showaggregates: true,
altRows: true,
filterable: true,
selectionmode: ‘singlecell’,
showstatusbar: true,

//enablebrowserselection: true,
// autoheight: true,
columnsresize: true,
height: 150,
columns: [

{ text: ‘JOB’, dataField: ‘JOB’,minwidth: 200},
{ text: ‘L1 COMPLETEZZA’, dataField: ‘L1’,width: 100,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L2 INTEGRITA’, dataField: ‘L2’,width: 100,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L3 BUSINESS’, dataField: ‘L3’,width: 100,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L4 CONVERSIONE’, dataField: ‘L4’,width: 100,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘Totale’, dataField: ‘TOTALE’,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},

]

});
}
}

var orders = ordersDataAdapter.records;

// console.log(orders);
var nestedGrids = new Array();
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();

var grid = $($(parentElement).children()[0]);

nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“PROJECT”]);
//console.log(orders[m][“PROJECT”]);
if (result)
ordersbyid.push(orders[m]);
}
var orderssource = { datafields: [
{ name: ‘PROJECT’ },
{ name: ‘CATEGORY’ },
{ name: ‘L1’, type: ‘number’ },
{ name: ‘L2’, type: ‘number’ },
{ name: ‘L3’, type: ‘number’ },
{ name: ‘L4’, type: ‘number’ },
{ name: ‘TOTALE’, type: ‘number’ },
],
id: ‘CATEGORY’,
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: ‘90%’,
theme: ‘darkblue’,
sortable: true,
showaggregates: true,
altRows: true,
filterable: true,
selectionmode: ‘singlecell’,
showstatusbar: true,
rowdetails: true,
initrowdetails: initrowdetails2,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 20px;’></div>”, rowdetailsheight: 200, rowdetailshidden: true },
//enablebrowserselection: true,
// autoheight: true,
columnsresize: true,
height: 150,
columns: [

{ text: ‘CATEGORY’, dataField: ‘CATEGORY’,minwidth: 250},
{ text: ‘L1 COMPLETEZZA’, dataField: ‘L1’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L2 INTEGRITA’, dataField: ‘L2’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L3 BUSINESS’, dataField: ‘L3’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L4 CONVERSIONE’, dataField: ‘L4’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘Totale’, dataField: ‘TOTALE’,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},

]

});
}
}

// SECONDA GRIGLIA

// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
theme: ‘darkblue’,
source: source,
rowdetails: true,
showaggregates: true,
//autoheight:true,
showstatusbar: true,
// rowsheight: 30,
sortable: true,
filterable: true,

selectionmode: ‘singlecell’,
enablebrowserselection: true,
altRows: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 20px;’></div>”, rowdetailsheight: 200, rowdetailshidden: true },

columns: [

{ text: ‘PROJECT’, dataField: ‘PROJECT’,minwidth: 250},
{ text: ‘L1 COMPLETEZZA’, dataField: ‘L1’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L2 INTEGRITA’, dataField: ‘L2’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L3 BUSINESS’, dataField: ‘L3’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘L4 CONVERSIONE’, dataField: ‘L4’,width: 150,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},
{ text: ‘Totale’, dataField: ‘TOTALE’,aggregates: [‘sum’],
aggregatesrenderer: function (aggregates) {
var renderstring = “”;
$.each(aggregates, function (key, value) {
//var name = ‘TOTALE’;
renderstring += ‘<b>Totale : ‘ + value+ ‘ </b>’;
});
return renderstring;
}
},

]
});

});

</script>

<div id=”jqxgrid” > </div>

[DimitarParticipant]

Hello kenio,

Please check out the tutorial Assembling N-Nested jQuery Grid. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts