jqgrid: get id of row where checkbox is clicked

Question

After my grid loads I bind a click handler to a column that contains a checkbox.

$("#mygrid td input").each(function () {
 $(this).click(function () {
 });
});

Is there a slick way in this click handler to get pk/id of the record what corresponds to the row the checkbox is in, so I can make a call to the server with it?

score 13 · Accepted Answer · answered Aug 26 '11 at 07:28

13

You can use eventObject parameter of the jQuery.click event:

$("#mygrid td input").each(function () {
    $(this).click(function (e) {
        // e.target point to <input> DOM element
        var tr = $(e.target).closest('tr');
        alert ("Current rowid=" + tr[0].id);
    });
});

You should just find the with respect of jQuery.closest the <tr> (table row) element to which the clicked <input> element belong. The id of the <tr> element is the rowid which you used during filling the grid.

answered Aug 26 '11 at 07:28

Oleg

220,925
34
403
798

You are a life saver! – Helen Araya Jan 29 '16 at 18:55
@Amete: You are welcome! The answer is very old. Today I would recommend better to use `beforeSelectRow` to detect any click inside of the grid. The `e.target` is the clicked element. One can detect the row and the column in which it's clicked and to use `.is(":checked")` in case if the checkbox is clicked. An example [the demo](http://www.ok-soft-gmbh.com/jqGrid/EditableCheckbox1.htm) from [the answer](http://stackoverflow.com/a/24239416/315935) demonstrates what I mean. – Oleg Jan 29 '16 at 19:06

score 1 · Answer 2 · edited Jul 31 '13 at 23:40

$("#treegrid").jqGrid({
        url: '${createLink(controller:"poa", action:"obtEstrucAreasDep")}',
        datatype: 'json',
        postData: {
            gestion: function() { return ${gestion}; }
        },
        mtype: 'GET',
        colNames: ["ID", "Nombre de Area", "Sigla", "Nivel", "Gener.HR", "Recep.HR", "Activo"],
        colModel: [
            {name:'id',    index:'id',    width:1,  hidden:true,  key:true},
            {name:'area',  index:'area',  width:95, hidden:false, sortable:true},
            {name:'sigla', index:'sigla', width:25, hidden:false, sortable:false, align:'center'},
            {name:'nivel', index:'nivel', width:1,  hidden:true,  align:'center'},
            {name:'genhr', index:'genhr', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}},
            {name:'recep', index:'recep', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}},
            {name:'activ', index:'activ', width:25, align:'center', editable: true, edittype:'checkbox', editoptions:{value:"True:False"}, formatter:"checkbox", formatoptions:{disabled:false}}
        ],
        treeGridModel: 'adjacency',
        height: 'auto',
        width: '500', //360
        treeGrid: true,
        ExpandColumn: 'area',
        ExpandColClick: true,
        caption: '${titulo}'+' - GESTION '+'${gestion}',
        onSelectRow: function(id){operRowJQGrid(id);}
    });

This was provided by JuanFer

    jQuery(document).delegate('#treegrid .jqgrow td input', 'click', function(e){

        var tr = $(e.target).closest('tr');
        var rowid = tr[0].id;

        var $myGrid = jQuery('#treegrid');
        var i = $.jgrid.getCellIndex($(e.target).closest('td')[0]);
        var cm = $myGrid.jqGrid('getGridParam', 'colModel');
        var colName = cm[i].name;

        var y = $(this).val();
        var x = false

        if(y=='false'){
            $(this).val('true');
        }else{
            $(this).val('false');
        }
        x = $(this).val();
        alert("check = "+x+", id = "+rowid+", col name = "+colName);
    });

jqgrid: get id of row where checkbox is clicked

2 Answers2