Question

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?

Answer 1

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').