I'm exploring jqGrid in my journey of learning Javascript and jQuery and I manged to put a checkbox in a grid cell, awesome!

Here's what I have:

$("#myTable").jqGrid({
  colModel:[
     name:'cb', index:'cb', width:40, sorttype:"text", align:"center",
     edittype:"checkbox", editoptions:{value:"Yes:No"}, formatter: "checkbox",
     formatoptions: {disabled : false}},
     other stuff...
  ]

When a checkbox is clicked, how do I catch the event and determine the corresponding row data?

Also, when I click the checkbox is the underlying data on the client side updated (does the cb field switch "Yes"/"No")? How do I achieve this?

I'm exploring jqGrid in my journey of learning Javascript and jQuery and I manged to put a checkbox in a grid cell, awesome!

Here's what I have:

$("#myTable").jqGrid({
  colModel:[
     name:'cb', index:'cb', width:40, sorttype:"text", align:"center",
     edittype:"checkbox", editoptions:{value:"Yes:No"}, formatter: "checkbox",
     formatoptions: {disabled : false}},
     other stuff...
  ]

When a checkbox is clicked, how do I catch the event and determine the corresponding row data?

Also, when I click the checkbox is the underlying data on the client side updated (does the cb field switch "Yes"/"No")? How do I achieve this?

• javascript
• jquery
• checkbox
• jqgrid
• jquery-events

Share Improve this question Follow edited Aug 30, 2020 at 17:58 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 10, 2012 at 22:00 Marsellus WallaceMarsellus Wallace 18.6k2727 gold badges9595 silver badges158158 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

First of all you should not use 'cb' as the name of the column because it is reserved column name. Other two reserved column names are 'subgrid' and 'rn'. Just use any other name if you don't want to have strange problems.

You have to bind the click event manually to your event handler. To do this you have some options.

You can bind click to all checkboxes inside of the loadComplete callback. See the answer where are used jQuery to enumerate all checkboxes. Another answer shows a little more effective way which use the fact that DOM of <table>, <tr> and <td> supports already native implemented rows and cells collections. So you can access <td> by this.rows[iRow].cells[iCol] inside of loadComplete.

One more way will be to use custom formatter instead of formatter: 'checkbox' and use onclick attribute for binding.

UPDATED: If you use local data in the grid you have to update the corresponding value manually. See the answer for example. It describes how to use getLocalRow or use data and _index internal parameters of jqGrid.

To get id of the row on which the user clicked you can use target of the current event $(e.target).closest("tr.jqgrow").attr('id').