Detecting checkbox event in jqGrid cell
I study jqGrid
in my learning journey javascript
and jQuery
and I managed to put a checkbox
into a grid cell, amazing!
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 the checkbox is clicked, how can I catch the event and determine the appropriate row data?
Also, when I click the checkbox, the underlying data is refreshed on the client side (is the cb "Yes" / "No" field disabled)? How do you achieve this?
source to share
First of all, you shouldn't use it 'cb'
as a name
column because it is a reserved column name . The other two reserved column names are 'subgrid'
and 'rn'
. Just use any other name if you don't want to have strange problems.
You need to bind the event click
manually to the event handler. To do this, you have several options.
You can bind click
to all checkboxes inside the callback loadComplete
. See the answer where jQuery is used to list all checkboxes. Another reply shows a slightly more efficient way to use the fact that the DOM <table>
, <tr>
and the <td>
support already built rows
and cells
collections. This way you can access <td>
the this.rows[iRow].cells[iCol]
inside loadComplete
.
Another way is to use custom formatter instead formatter: 'checkbox'
and use attribute onclick
for binding.
UPDATED . If you are using local data in a grid, you need to manually update the corresponding value. See the answer for example. It describes how to use getLocalRow
or use data
and _index
internal parameters jqGrid.
To get the id
line the user has clicked on, you can use the target of the current event $(e.target).closest("tr.jqgrow").attr('id')
.
source to share