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?

+3


source to share


1 answer


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

.

+2


source







All Articles