CODEWITHSUNDEEP
jqgrid
Colin
Colin

Reputation: 91

How to add user defined checkbox at JQGrid header

Has try as below

jqGrid({
datatype: 'json',
colNames: ["<input type='checkbox' name = 'chkAllOutputField'/>", "other columns" ]

check box is shown on header , but will not be checked/unchecked no matter how you click it.

How can I make it checked/unchecked by clicking

Upvotes: 3

Views: 14808

Answers (3)

cns
cns

Reputation: 16

Here is the better way to make the checkbox in the jqgrid header to work.

If you see the html code, there is a div tag surrounding the input tag which has class - ui-jqgrid-sortable. This is preventing checking the checkbox.

Remove it, it works as you expected.

Solution below

Add an id to the checkbox

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

when initializing the grid or form add the below line.

$('#hdrCbox').parent().removeClass('ui-jqgrid-sortable');

Upvotes: 0

Colin
Colin

Reputation: 91

Find one way here: How can I add a checkbox into a jQgrid header

<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; 
}

Upvotes: 6

Oleg
Oleg

Reputation: 221997

I don't understand what scenario you want to implement with the checkbox inside of the column header, but to be able just to change the "checked" state of the checkbox you should unbind the "click" event handle used by jqGrid for the header. For example if the column has the name "foo" (name:"foo") and the grid has id="list", then the corresponding element of the header has id="list_foo" and you can use

$("th#list_foo").unbind('click');

to do this

$("th#list_foo input").click(function(){
    // implement your custom behavior
    alert("clicked!");
});

Upvotes: 3

Related Questions