I am receiveing an exception (Cannot read property 'html' of null) when you have a grid in which the columns are wider than the grid (i.e. horizontal scrollbar) and you have a checkBoxSelection column. I was able to reproduce this with the demo code on the site for the checkbox column. All that is needed is to comment out the flexWidth line to force the grid to have scrollbars. When you do this and run the demo you get the exception.
If you remove the chekcBox column it does nto happen. The issue appears to be that the table cell for teh checkbox does not exists (pq-col-indx=0) in the header toable for the non-frozen columns. That is about as far as I got with this. I just started evaluating paramquery today so I am not very familiar with it yet. Normally, I would think I made a mistake in my code somewhere - except I can recreate with the demo very easily.
Below is the demo code with the line commented out:
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{rank:1, company:'Exxon Mobil',revenues: '339,938.0',profits: '36,130.0', state: true},
{rank:2, company:'Wal-Mart Stores',revenues: '315,654.0', profits:'11,231.0', state: false},
{rank:3, company:'Royal Dutch Shell', revenues:'306,731.0', profits:'25,311.0', state: false},
{rank:4, company:'BP', revenues:'267,600.0',profits: '22,341.0', state: false},
{rank:5, company: 'General Motors',revenues: '192,604.0', profits:'-10,567.0', state: true},
{rank:6, company: 'Chevron', revenues:'189,481.0', profits:'14,099.0', state: false},
{rank:7, company: 'DaimlerChrysler',revenues: '186,106.3',profits: '3,536.3', state: false},
{rank:8, company: 'Toyota Motor', revenues:'185,805.0',profits: '12,119.6', state: false},
{rank:9, company: 'Ford Motor', revenues:'177,210.0',profits: '2,024.0', state: false},
{rank:10, company: 'ConocoPhillips', revenues:'166,683.0', profits:'13,529.0', state: true},
{rank:11, company: 'General Electric',revenues: '157,153.0', profits:'16,353.0', state: false},
{rank:12, company: 'Total', revenues:'152,360.7', profits:'15,250.0', state: false},
{rank:13, company: 'ING Group', revenues:'138,235.3', profits:'8,958.9', state: false},
{rank:14, company: 'Citigroup', revenues:'131,045.0', profits:'24,589.0', state: false},
{rank:15, company: 'AXA', revenues:'129,839.2', profits:'5,186.5', state: false},
{rank:16, company: 'Allianz',revenues: '121,406.0', profits:'5,442.4', state: false},
{rank:17, company: 'Volkswagen', revenues:'118,376.6',profits: '1,391.7', state: true},
{rank:18, company: 'Fortis', revenues:'112,351.4', profits:'4,896.3', state: false},
{rank:19, company: 'Crédit Agricole', revenues:'110,764.6', profits:'7,434.3', state: false},
{rank:20, company: 'American Intl. Group', revenues:'108,905.0',profits: '10,477.0', state: false}
];
var obj = {
width:700,
height:200,
editable: false,
//freezeRows: 2,
title:"Checkbox selections",
selectionModel: { type: 'none', subtype:'incr', cbHeader:true, cbAll:true},
minWidth: 30,
flexHeight:true,
//flexWidth: true,
pageModel: {type:"local", rPP:10 },
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 220, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "", dataIndx: "state", width: 30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }
],
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
});
