Hopefully I'm not missing something obvious, but using the example you noted: For example you group by ShipCountry (no group check boxes needed) and you have a checkbox on the Paid column to mark and post the item as paid. The example code below does not capture true and throws the TypeError.
My apologies in advance if I'm not understanding the usage of a checkbox in a grouped grid.
$(function () {
var colM = [
{ title: "Customer Name", width: 130, dataIndx: "ContactName" },
{
title: "Paid",
width: 220,
dataIndx: "Paid",
type: 'checkbox',
cbId: 'chk',
useLabel: true
} ,
//column to store checkbox state of ProductName.
{
dataIndx: 'chk',
dataType: 'bool',
cb: { header: true },
hidden: false,
editable: function(ui){
//to make checkboxes editable selectively.
return true;
}
},
{ title: "ShipCountry", width: 120, dataIndx: "ShipCountry" },
{ title: "Freight", width: 120, format: '$##,###.00',
summary: {
type: "sum"
},
dataType: "float", dataIndx: "Freight"
},
{ title: "Shipping Via", width: 130, dataIndx: "ShipVia" },
{ title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
{ width: 100, dataIndx: "OrderID" },
{ title: "Shipping City", width: 130, dataIndx: "ShipCity" }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "/Content/orders.json"
//url: "/pro/orders/get",//for ASP.NET
//url: "orders.php",//for PHP
};
var groupModel = {
checkbox: false,
checkboxHead: false,
on: true,
dataIndx: ['ShipCountry'],
menuItems: ['grandSummary'],
summaryInTitleRow: 'all',
titleInFirstCol: true,
fixCols: false,
indent: 20,
collapsed: [false, true],
title: [
"{0} ({1})",
"{0} - {1}"
],
useLabel: true
};
var obj = {
height: 500,
toolbar: {
items: [
{
type: 'button',
label: "Toggle grouping",
listener: function () {
var on = this.option('groupModel.on');
//toggle grouping.
this.Group().option({ on: !on });
}
},
{
type: 'checkbox',
label: 'bind selections',
listener: function(evt){
this.Group().unCheckAll();//first clear all.
this.Group().option({select: evt.target.checked});
}
},
{
type: 'button',
label: "Get checked",
listener: function () {
var selected = this.Group().getCheckedNodes().map(function(rd) {
return rd.OrderID;
})
alert( selected );
}
}
]
},
dataModel: dataModel,
scrollModel: { autoFit: true },
colModel: colM,
numberCell: { show: false },
menuIcon: true,
groupModel: groupModel,
showTitle: false,
hwrap: false,
wrap: false
};
pq.grid("#grid_group_rows", obj);
});
