Using your own demo and simply changing dataIndx: ['OrderID'] and setting OrderID as the first column causes the issue that im facing, the checkboxes of the OrderID column arent showing when toggling between grouped and ungrouped using the toolbar button, and also the checked status is not conserved.
$(function () {
var colM = [
{ width: 100, dataIndx: "OrderID", cbId: "chkOrder", type: "checkbox", useLabel: true },
{
hidden: true,
cb: {header: true},
dataIndx: 'chkOrder',
dataType:'bool',
type: "checkbox"
},
{ title: "Customer Name", width: 130, dataIndx: "ContactName" },
{ 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" },
{ 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: true,
checkboxHead: true,
on: true,
dataIndx: ['OrderID'],
menuItems: ['grandSummary'],
summaryInTitleRow: 'all',
titleInFirstCol: true,
fixCols: false,
indent: 20,
collapsed: [false, true],
title: [
"{0} ({1})",
"{0} - {1}"
],
useLabel: true
};
var obj = {
height: 500,
check: function (evt, ui) {
},
toolbar: {
items: [
{
type: 'button',
label: "Toggle grouping",
listener: function () {
var on = this.option('groupModel.on');
//toggle grouping.
this.Group().option({ on: !on });
}
}
]
},
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);
});