how to get selected checkbox row id in jq grid with editable checkbox

Question

  var data = [[48803,"true"], [48769,"true"]];

      $("#grid").jqGrid({
        datatype: "local",
        height: 250,
        colNames: ['Inv No','MyPrint'],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 60,
            sorttype: "int"},
      {
            name: 'MyPrint',
            index: 'MyPrint',
            width: 80,
            editoptions: { value: "True:False" },
            editrules: { required: true },
            edittype: 'checkbox',
            formatter: myPrintCheckboxFormatter,
            formatoptions: { disabled: false },
            editable: true  }    
        ],
        caption: "test example"
    });

    var names = ["id","true"];
    var mydata = [];

    for (var i = 0; i < data.length; i++) {
        mydata[i] = {};
        for (var j = 0; j < data[i].length; j++) {
            mydata[i][names[j]] = data[i][j];
        }
    }

    for (var i = 0; i <= mydata.length; i++) {
        $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
    }

    function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
//how to pass currently selcted id of row
        return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow()'>";
    }

    function getCurrentBinRow() {
        /*here I want to get the current selected MyPrint row*/

 var id= $('#grid').jqGrid('getGridParam', 'selrow');  // id  becomes null  
   }

How to retrive selected row id ?,i have tried but getting null. I does not understand how to pass it from onchange event javascript function getCurrentBinRow.i want to pass checked and unchecked status to server and if you checked the css of row need to background red and after unchecked css need to at row

Jai · Answer 1 · 2015-03-26T07:59:20.073

You can do this:

function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
    return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow(this)'>";
} //---------------------------------------------------pass this in here-----^^^^

function getCurrentBinRow(elem) {
    var id = $(elem).closest('tr')[0].id;
    $(elem).closest('tr').toggleClass('redRow'); // adds red bgcolor when checked.
    alert(id);  
}

add this css in your stylesheet:

.redRow{ background:red !important; }

Update:

You can even do this too:

You have options param in the custom formatter where you have rowId available in it. so you can pass options.rowId in the onchange function.

function myPrintCheckboxFormatter(cellvalue, options, rowObject) {
    return "<input type='checkbox' name='MyPrint' onchange='getCurrentBinRow(" + options.rowId + ")'>";
} //-------------------------------------------------------pass this in here-----^^^^^^^^^^^^^^

function getCurrentBinRow(rowid) {
    alert(rowid);  
}

how to make css of background color to red if checked and if unchecked converted to normal css — Jack, Mar 26 '15 at 07:52
You can make a new css class like `.redRow{background:red !important;}` and then within the first answer you can use `.toggleClass()` to add/remove the class. — Jai, Mar 26 '15 at 07:57
@govindaghimre you can now check the answer updated. first part you can see. — Jai, Mar 26 '15 at 07:59

score 0 · Answer 2 · edited May 23 '17 at 12:23

I don't recommend you to use custom formatter to add the column with checkboxs. The predefined formatter: "checkbox" do this already. If you use formatoptions: { disabled: false} then the checkboxs are enabled. To implement some action on click on the checkbox it's not the best to use onchange='getCurrentBinRow() on every checkbox. Event bubbling allows to register one event handler only on a parent of the all checkboxes. It could be tbody or table. jqGrid register already onclick event handler on the table and allows to use beforeSelectRow and onCellSelect callbacks (jqGridBeforeSelectRow or jqGridCellSelect events) to implement some custom action. The demo or this one, created for the answer, demonstrates the approach. It's the way which I would recommend you.

The last comment. The code example which you posted is really very bad. You should use data: mydata option of jqGrid to create the grid with the specified input data. Moreover one should use gridview: true and autoencode: true options additionally. Filling the grid by calling of addRowData in loop is the slowest way to fill the grid.

how to get selected checkbox row id in jq grid with editable checkbox

2 Answers2

Update:

Linked