Below is the entire function to setup the grid based on a Data parameter which retrieves many rows from a PHP AJAX call. I didn't see any documentation that describes checkboxes as "normal" (or not normal?). So I cannot answer your question of whether I have set up a normal checkbox or not, so maybe you could explain that. I've attached a picture of what the treegrid looks like.
function makepqgridnav_interval(data) {
console.log("and what do we have here?",data.results)
///////// SHAPE DATA
///////// SHAPE DATA
///////// SHAPE DATA
var pqdatanavimain = [];
var ni=0;
var pqdata2childrenimain = [], totcost=0, totusage=0;
var pqmergeCells = [];
$.each(data.results.meters, function(i,d) { // each METER
oBoard = {
'id': 'id' + d[0].board_id,
'name': d[0].board_id + ' ' + d[0].board_sn,
'meter': d[0].board_id + ' ' + d[0].board_sn,
'address': d[0].board_id + ' ' + d[0].board_sn,
'size': d.length,
'date': moment(d[0].sensor_sample_data_dt).format("MMM DD, YYYY"),
'children': null,
};
pqdata2childrenimain = [];
$.each(d, function(i2,d2) {
ni++;
totusage += d2.lastdatavalue;
pqdata2childrenimain.push({
"id": "id" + d2.sensor_id,
"name": d2.sensor_sn,
'sensor': d2.sensor_id,
"size": d2.sensor_sample_data + " " + htmlDecode(d2.unitabbrev),
"date": moment(d2.sensor_sample_data_dt).format("MMM DD, YYYY"),
'deviceid': d2.deviceid,
'devicedesc': d2.devicedesc,
'devicemetasensor': d2.devicemetasensor,
'forecolor': d2.forecolor,
'backcolor': d2.backcolor,
});
});
ni++;
pqdatanavimain.push({
"id": oBoard.id,
"name": oBoard.name,
"meter": oBoard.meter,
"size": oBoard.size,
"date": oBoard.date,
"children": pqdata2childrenimain,
});
pqmergeCells.push(
{'r1': ni, 'c1': 1, 'rc': 1, 'cc': 99}
);
});
console.log('data for pqgridnav-imain',pqdatanavimain);
///////// GRID MODEL
///////// GRID MODEL
///////// GRID MODEL
var pqgroupModel = {
on: true,
dataIndx: ['name'],
collapsed: [true,true,true],
title: [
"{0} ({1})",
"{0} - {1}"
]
};
var pqobj = {
selfOptions: {
suppressText: "",
},
height: 800, // 'flex',
maxHeight: 800,
minHeight: 800,
resizable: true,
filterModel: { on: true, mode: "AND", header: true },
swipeModel: { on: 'touch' },
stripeRows: false,
groupModel: pqgroupModel,
rowInit: function(ui){
//var rd = ui.rowData, color = ["lightyellow","lightgreen","pink","lightblue"];
//if( rd.pq_gsummary ){
// return {style:"background:" + color[rd.pq_level] + ";"};
//}
},
rowBorders: false,
showToolbar: false,
numberCell: false,
showHeader: true,
showTitle: false,
showTop: false,
width: '100%',
rowHt: 12,
// removed toolbar
treeModel: {
dataIndx: 'name',
//select: true,
checkbox: function(rd){
if (rd.hasOwnProperty('meter')) {
return false;
} else {
return true;
}
},
checkboxHead: false,
cascade: true,
icons: false,
collapsed: true,
render: function (ui) {
//console.log('ui',ui)
if (ui.rowData.hasOwnProperty('meter')) {
return {
text: "<span class='spanaddress trspan" + ui.rowData.meter + " row" + ui.rowData.id + "'>" + translate(ui.rowData.meter.replace(pqobj.selfOptions.suppressText,'')) + "</span>",
cls: 'checkmark meter meter' + ui.rowData.meter,
attr: 'data-one=' + ui.rowData.meter,
}
};
if (ui.rowData.hasOwnProperty('sensor')) {
return {
text: "<span class='spanmeter trspan" + ui.rowData.sensor + " row" + ui.rowData.id + "' title='" + ui.rowData.sensor + "'>" + translate(ui.cellData) + "</span>",
cls: 'checkmark meter meter' + ui.rowData.sensor,
}
}
},
summary: false, // otherwise blank row with summaries before each outdent
style: {
'font-size': '11px', 'color': '#555'
},
},
sortModel: {ignoreCase: true},
scrollModel: { autoFit: true },
columnTemplate: {
minWidth: '30%',
maxWidth: '50%',
width: '50%',
style:
{'font-size': '11px', 'color': 'black', 'line-height': '1em', 'font-family': 'Droid Sans' },
styleHead: {'font-size': '11px' },
},
menuIcon: false,
editor: { style: 'font-size: 11px;' },
mergeCells: pqmergeCells,
colModel: [
//optional column required only to implement disabled checkboxes.
{
height: '15px',
dataIndx: 'pq_tree_cb',
hidden: true,
editable: false,
},{
dataIndx: 'name',
hidden: false,
width: '90%',
maxWidth: '90%',
minWidth: '90%',
height: '15px',
title: 'Meter / Sensor',
exportRender: true,
filter: {
crules:[{ condition: "contain" }]
},
style: { 'font-size': '11px', 'color': 'black', 'line-height': '1em', 'font-family': 'Droid Sans' },
render: function (ui) {
//return ui.cellData + "<br/>" + ui.rowData.size + " (<span title='" + ui.rowData.devicemetasensor + "' style='color: " + ui.rowData.forecolor + "; background-color: " + ui.rowData.backcolor + ";'>" + ui.rowData.deviceid + "</span>)";
},
styleHead: {'font-size': '11px'},
editable: false,
},
// {
// cls: 'meter usagekwh',
// dataIndx: 'size',
// width: '28%',
// maxWidth: '28%',
// minWidth: '28%',
// title: 'Typical Value',
// hidden: false,
// exportRender: true,
// dataType: 'float',
// format: "#,###",
// filter: {
// //crules:[{ condition: "contain" }]
// },
// render: function (ui) {
// return ui.cellData + " (<span title='" + ui.rowData.devicemetasensor + "' style='color: " + ui.rowData.forecolor + "; background-color: " + ui.rowData.backcolor + ";'>" + ui.rowData.deviceid + "</span>)";
//
// },
// styleHead: {'font-size': '11px'},
// },
// {
// cls: 'meter lastbill',
// dataIndx: 'date',
// title: 'Last Bill',
// dataType: 'date',
// style: {'font-size': '11px' },
// styleHead: {'font-size': '11px' },
// }
],
beforeCheck: function (event,ui) {
// var mycheckbox = ui.grid.Checkbox('name');
// mycheckbox.unCheckAll();
// UNCHECK ALL
affected = thetreenavimain.getCheckedNodes();
$.each(affected, function(di,dq) {
//console.log('this.dq',dq)
this.pq_tree_cb = false;
this.pq_cellcls = {name: ''};
//thegridnavimain.removeClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });
//dq.updateRow({ newRow: {state: false}, rowIndx: ui.rowIndx });
});
thegridnavimain.refreshView();
},
check: function( event, ui ) {
var affected;
if (typeof ui.getCascadeList === 'function') {
affected = ui.getCascadeList();
//console.log('affected',affected)
$.each(affected, function(di,dq) {
//console.log(dq,dq.newRow.pq_tree_cb);
if (dq.newRow.pq_tree_cb==false) {
thegridnavimain.removeClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });
}
if (dq.newRow.pq_tree_cb==true) {
thegridnavimain.addClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });
}
})
} else {
affected = ui.rows;
console.log('affected',affected)
$.each(affected, function(di,dq) {
//console.log(dq,dq.rowData.pq_tree_cb);
if (dq.rowData.pq_tree_cb==false) {
thegridnavimain.removeClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });
}
if (dq.rowData.pq_tree_cb==true) {
thegridnavimain.addClass({rowIndx: dq.rowIndx, dataIndx: 'name', cls: 'selected' });
}
})
}
var qchecked = thetreenavimain.getCheckedNodes();
var chtsensors = "", runtimetitle;
$.each(qchecked, function(di,dq) {
if (dq.hasOwnProperty('sensor')) {
chtsensors += (chtsensors>'' ? "," : "" ) + dq.sensor;
runtimetitle = dq.name + " (" + dq.sensor + ")";
}
});
console.log('The selected Sensor(s):',qchecked);
//makepqgriddata(data,qchecked);
chartdef['profile1d'].chtsensorlist = chtsensors;
chartdef['profile1d'].chartoptions.title.text = runtimetitle;
chartProfiler('portlet-1d-scurve',chartdef['profile1d'], {}, (function(d,s) { doProfilerMarkup(d,s) }));
},
dataModel: { data: pqdatanavimain }
}
thegridnavimain = pq.grid("#pq-tvnavigator-imain", pqobj);
thetreenavimain = thegridnavimain.Tree();
for (var i=0; i<pqdatanavimain.length; i++) {
pqmergeCells.push(
{'r1': pqdatanavimain[i]["pq_ri"], 'c1': 1, 'rc': 1, 'cc': 99}
);
};
thegridnavimain.refreshView();
};
