How can I add a checkbox into a jQgrid header

Question

Each jQgrid row has multiple checkboxes, so I cannot use (just) the multiselect.

This is how the column is setup...

{ name: 'ColName', label: '', width: 50, editable: true, sortable: false, edittype: "checkbox", formatter: 'checkbox', formatoptions: { disabled:false}, index:"my_checkbox", editoptions: {value:"Yes":"No"} }

When I click the checkbox in the header, the header is redrawn without the check. I can capture the event, but cannot display the check to the user.

So my question would be, how can I get a checkbox to operate normally inside a header label OR how can I implement multiple multiselects.

Answer 1

I was able to fix my problem by preventing the jQgrid events from firing after the checkbox event.

I changed my checkbox to...

<input type="checkbox" onclick="checkBox(event)" />

and added the following method...

function checkBox(e) {
  e = e||event;/* get IE event ( not passed ) */
  e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
}