I encounter this error with mergeCells and row detail.
I am using your demo at
http://paramquery.com/pro/demos/nesting_localThe HTML and Javascript are given below.
When I click on 'Manager Site' and expand 'Part B' and 'Part C', it can be seen in the attached image that the 'Part C' detail is placed wrongly. It should be at the right of 'Manager Site' cell.
This is the HTML:
<div id="grid_md" style="margin:5px auto;"></div>
<style>
.pq-grid{
font-size:9pt;
}
.cTotal {
background: #ddffff;
}
.cGroupLastRow {
background: #ffdddd;
}
.pq-grid p
{
margin:10px;
}
.pq-grid .pq-tabs b
{
font-weight:bold;
}
</style>
This is the Javascript:
$(function () {
var getDetailModel = function( data ){
return {
dataModel: { data: data },
colModel: [
{ title: 'Date', dataIndx: 'StartDate', dataType: 'date', format: "dd-M-yy", width:90 },
{ title: 'Quantity', dataIndx: 'ManpowerQty', dataType: 'integer', width:50},
{ title: 'Org', dataIndx: 'OrgUnit', dataType: 'string', width:140},
{ title: 'Name', dataIndx: 'Emp', dataType: 'string', width:250},
{ title: 'Job', dataIndx: 'CurrJob', dataType: 'string', width:140},
],
height: 'flex',
numberCell: { show: false },
scrollModel: {autoFit: true},
showTop: false,
};
};
function setGridData($grid, mergeArry) {
var mdata = $grid.pqGrid( "option", "dataModel.data" );
var mlen = mdata.length;
var mArrA = mdata[0];
var mArrB = mdata[1];
var mArrC = mdata[2];
var mlen = (mdata.length-3)/3;
for (var i = 0; i < mlen; i++) {
var r1 = (i + 1) * 3;
mergeArry.push( {r1: r1, c1: 1, rc: 3, cc: 1 } );
}
mlen = mdata.length;
for (var i = 3; i < mlen; i++) {
var mrow = mdata[i];
var rowId = mrow.id;
var slen = rowId.length;
var rowType = rowId.charAt(slen - 1)
mrow.Total = mrow.Jan + mrow.Feb + mrow.Mar + mrow.Apr + mrow.May + mrow.Jun +
mrow.Jul + mrow.Aug + mrow.Sep + mrow.Oct + mrow.Nov + mrow.Dec;
if (rowType == 'A' && slen > 1) {
mArrA.Jan += mrow.Jan;
mArrA.Feb += mrow.Feb;
mArrA.Mar += mrow.Mar;
mArrA.Apr += mrow.Apr;
mArrA.May += mrow.May;
mArrA.Jun += mrow.Jun;
mArrA.Jul += mrow.Jul;
mArrA.Aug += mrow.Aug;
mArrA.Sep += mrow.Sep;
mArrA.Oct += mrow.Oct;
mArrA.Nov += mrow.Nov;
mArrA.Dec += mrow.Dec;
}
if (rowType == 'B' && slen > 1) {
mArrB.Jan += mrow.Jan;
mArrB.Feb += mrow.Feb;
mArrB.Mar += mrow.Mar;
mArrB.Apr += mrow.Apr;
mArrB.May += mrow.May;
mArrB.Jun += mrow.Jun;
mArrB.Jul += mrow.Jul;
mArrB.Aug += mrow.Aug;
mArrB.Sep += mrow.Sep;
mArrB.Oct += mrow.Oct;
mArrB.Nov += mrow.Nov;
mArrB.Dec += mrow.Dec;
}
if (rowType == 'C' && slen > 1) {
mArrC.Jan += mrow.Jan;
mArrC.Feb += mrow.Feb;
mArrC.Mar += mrow.Mar;
mArrC.Apr += mrow.Apr;
mArrC.May += mrow.May;
mArrC.Jun += mrow.Jun;
mArrC.Jul += mrow.Jul;
mArrC.Aug += mrow.Aug;
mArrC.Sep += mrow.Sep;
mArrC.Oct += mrow.Oct;
mArrC.Nov += mrow.Nov;
mArrC.Dec += mrow.Dec;
}
}
mArrA.Total = mArrA.Jan + mArrA.Feb + mArrA.Mar + mArrA.Apr + mArrA.May + mArrA.Jun +
mArrA.Jul + mArrA.Aug + mArrA.Sep + mArrA.Oct + mArrA.Nov + mArrA.Dec;
mArrB.Total = mArrB.Jan + mArrB.Feb + mArrB.Mar + mArrB.Apr + mArrB.May + mArrB.Jun +
mArrB.Jul + mArrB.Aug + mArrB.Sep + mArrB.Oct + mArrB.Nov + mArrB.Dec;
mArrC.Total = mArrC.Jan + mArrC.Feb + mArrC.Mar + mArrC.Apr + mArrC.May + mArrC.Jun +
mArrC.Jul + mArrC.Aug + mArrC.Sep + mArrC.Oct + mArrC.Nov + mArrC.Dec;
$grid.pqGrid( "option", "dataModel.data", mdata );
}
var data = [
{ id: 'A', JobCode: 'Total Part A', JobType: '', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: 'B', JobCode: 'Total Part B', JobType: '', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: 'C', JobCode: 'Total Part C', JobType: '', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '1A', JobCode: 'Manager Site', JobType: 'Part A', Jan: 1, Feb: 2, Mar: 3, Apr: 4, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0,
data:[
{ StartDate: '2014-07-15', ManpowerQty:1, OrgUnit:'Apple - USA', Emp: 'James Doe', CurrJob: 'Manager'},
{ StartDate: '2013-03-25', ManpowerQty:1, OrgUnit:'Apple - China', Emp: 'Tan Ling Kok', CurrJob: 'Manager'},
]
},
{ id: '1B', JobCode: '', JobType: 'Part B', Jan: 2, Feb: 0, Mar: 1, Apr: 4, May: 3, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0,
data:[
{ StartDate: '2014-07-15', ManpowerQty:1, OrgUnit:'Apple - USA', Emp: 'James Doe', CurrJob: 'Manager'},
{ StartDate: '2013-03-25', ManpowerQty:1, OrgUnit:'Apple - China', Emp: 'Tan Ling Kok', CurrJob: 'Manager'},
]
},
{ id: '1C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 1, Mar: 0, Apr: 4, May: 0, Jun: 3, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0,
data:[
{ StartDate: '2014-07-15', ManpowerQty:1, OrgUnit:'Apple - USA', Emp: 'James Doe', CurrJob: 'Manager'},
{ StartDate: '2013-03-25', ManpowerQty:1, OrgUnit:'Apple - China', Emp: 'Tan Ling Kok', CurrJob: 'Manager'},
]
},
{ id: '2A', JobCode: 'Supervisor Site', JobType: 'Part A', Jan: 2, Feb: 1, Mar: 5, Apr: 1, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '2B', JobCode: '', JobType: 'Part B', Jan: 1, Feb: 2, Mar: 0, Apr: 3, May: 1, Jun: 2, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '2C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 0, Mar: 2, Apr: 3, May: 0, Jun: 0, Jul: 0, Aug: 4, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '3A', JobCode: 'Clerk of Works', JobType: 'Part A', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '3B', JobCode: '', JobType: 'Part B', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '3C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '4A', JobCode: 'General Labour', JobType: 'Part A', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '4B', JobCode: '', JobType: 'Part B', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '4C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '5A', JobCode: 'Special Labour', JobType: 'Part A', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '5B', JobCode: '', JobType: 'Part B', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '5C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '6A', JobCode: 'Other Labour', JobType: 'Part A', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '6B', JobCode: '', JobType: 'Part B', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
{ id: '6C', JobCode: '', JobType: 'Part C', Jan: 0, Feb: 0, Mar: 0, Apr: 0, May: 0, Jun: 0, Jul: 0, Aug: 0, Sep: 0, Oct: 0, Nov: 0, Dec: 0, Total: 0},
];
var mergeArry = [
//r1 is shorthand for rowIndx, c1 for colIndx, rc for rowCount or rowspan, cc for columnCount or colspan.
{r1: 0, c1: 1, rc: 1, cc: 3 },
{r1: 1, c1: 1, rc: 1, cc: 3 },
{r1: 2, c1: 1, rc: 1, cc: 3 },
];
var obj = {
title: "Planning",
numberCell: { show: false },
//selectionModel: { type: null },
pasteModel: { on: false },
freezeBorders: true,
filterModel: {header: false},
sortModel: {on: false},
height: '500',
freezeRows: 3,
freezeColumns: 2,
stripeRows: false,
//rowInit can be used to conditionally apply HTML attributes, css styles, css classes, etc to rows.
rowInit: function (ui) {
var rowId = ui.rowData.id;
var slen = rowId.length;
var rowType = rowId.charAt(slen - 1)
if (rowType == 'C' && slen > 1) {
return {
cls: 'cGroupLastRow'
};
}
else if (slen == 1) {
return {
cls: 'cTotal'
};
}
},
beforeRowExpand: function( event, ui ) {
if (ui.rowData.data == null) {return false;}
},
beforeSort: function (evt, ui) {
var freezeRows = this.option("freezeRows"),
dataGrid = this.option("dataModel.data");
frozenRows = dataGrid.splice(0, freezeRows);
},
sort: function (evt, ui) {
var dataGrid = this.option("dataModel.data");
Array.prototype.unshift.apply(dataGrid, frozenRows);
},
scrollModel: { autoFit: true },
//pageModel: { type: "local", rPP: 21 },
mergeCells: [],
editable: false,
detailModel: {
init: function (ui) {
var rowData = ui.rowData,
model = getDetailModel( rowData.data ),
$grid = $("<div></div>").pqGrid(model);
return $grid;
}
},
colModel:
[
{ title: "ID", width: 100, dataType: "string", dataIndx: "id", hidden: true },
{ title: "Job", width: 220, dataType: "string", dataIndx: "JobCode" },
{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false,
render: function(ui){
if(ui.rowData.data == null){
//return custom html "" or " ";
return "";
}
else {
return null; // let the default rendering take place.
}
}
},
{ title: "Type", width: 180, dataType: "string", align: "left", dataIndx: "JobType" },
{ title: "Jan", dataIndx: "Jan", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Jan == 0) ? '' : ui.rowData.Jan;
return {text: ret};
},
},
{ title: "Feb", dataIndx: "Feb", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Feb == 0) ? '' : ui.rowData.Feb;
return {text: ret};
},
},
{ title: "Mar", dataIndx: "Mar", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Mar == 0) ? '' : ui.rowData.Mar;
return {text: ret};
},
},
{ title: "Apr", dataIndx: "Apr", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Apr == 0) ? '' : ui.rowData.Apr;
return {text: ret};
},
},
{ title: "May", dataIndx: "May", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.May == 0) ? '' : ui.rowData.May;
return {text: ret};
},
},
{ title: "Jun", dataIndx: "Jun", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Jun == 0) ? '' : ui.rowData.Jun;
return {text: ret};
},
},
{ title: "Jul", dataIndx: "Jul", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Jul == 0) ? '' : ui.rowData.Jul;
return {text: ret};
},
},
{ title: "Aug", dataIndx: "Aug", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Aug == 0) ? '' : ui.rowData.Aug;
return {text: ret};
},
},
{ title: "Sep", dataIndx: "Sep", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Sep == 0) ? '' : ui.rowData.Sep;
return {text: ret};
},
},
{ title: "Oct", dataIndx: "Oct", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Oct == 0) ? '' : ui.rowData.Oct;
return {text: ret};
},
},
{ title: "Nov", dataIndx: "Nov", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Nov == 0) ? '' : ui.rowData.Nov;
return {text: ret};
},
},
{ title: "Dec", dataIndx: "Dec", width: 40, dataType: "integer", align: "right",
render: function(ui){
var ret = (ui.rowData.Dec == 0) ? '' : ui.rowData.Dec;
return {text: ret};
},
},
{ title: "Total", dataIndx: "Total", width: 60, dataType: "integer", align: "right",
render: function(ui){
return {
//can also return attr (for attributes) and cls (for css classes) properties.
//style: "background: #ddffff;";
cls: "cTotal"
};
},
},
],
complete: function( event, ui ) {
grid = this; //pq.grid(gridDiv);
},
dataModel: {
data: data
}
};
var $grid = $("#grid_md").pqGrid(obj);
setGridData($grid, mergeArry);
$grid.pqGrid({mergeCells: mergeArry});
$grid.pqGrid("refreshView");
});
