JQgrid checkbox onclick update database

Question

I have a checkbox column in my JqGrid which get loaded from DB, so it is either checked or not checked when it is loaded.

What i want is : If checkbox is being checked or uncheked by user i want to update DB in at same. I dont want user to press enter or anything. only 1 click and send action to DB

name: 'Aktiv', index: 'Aktiv', width: 100, edittype: 'checkbox', align: 'center',formatter: "checkbox", editable: true, formatoptions: {disabled : false}

score 16 · Accepted Answer · edited Feb 21 '18 at 00:24

16

You can set a click event handler inside of loadComplete:

loadComplete: function () {
    var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i,
        c = rows.length;

    for (i = 1; i < c; i += 1) {
        $(rows[i].cells[iCol]).click(function (e) {
            var id = $(e.target).closest('tr')[0].id,
                isChecked = $(e.target).is(':checked');
            alert('clicked on the checkbox in the row with id=' + id +
                '\nNow the checkbox is ' +
                (isChecked? 'checked': 'not checked'));
        });
    }
}

where

var getColumnIndexByName = function(grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
    for (i = 1, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

Instead of the alert you should use jQuery.ajax to send information to the server about updating the checkbox state.

You can see a demo here.

edited Feb 21 '18 at 00:24

Mark Carpenter Jr

812
1
16
32

answered Aug 26 '11 at 21:13

Oleg

220,925
34
403
798

works perfectly, now i need to figure out how to send action futher to my controller which will send it futher to DB. Oh i think ive got it now – Timsen Aug 27 '11 at 10:30
@HardikMishra: You are welcome! Currently I prefer don't make *multipe* binding of `click` events. It's enough to use just *one* click on the whole body of grid. See [the answer](http://stackoverflow.com/a/14537512/315935) or [this one](http://stackoverflow.com/a/13765086/315935) – Oleg May 17 '13 at 16:00
@Oleg How to make it so that it focuses only on the Checkbox? – NewHistoricForm Mar 10 '15 at 21:56
@NewHistoricForm: Sorry, but I don't understand what you mean. In any way the answer is old. I find the solution from [the answer](http://stackoverflow.com/a/24239416/315935) better. – Oleg Mar 10 '15 at 22:03
@Oleg I mean that only clicking the checkbox will show the alert message. In my case i want it to make clicking on checkbox column save entire row data for corresponding row. – NewHistoricForm Mar 10 '15 at 22:28
@NewHistoricForm: Try [the demo](http://www.ok-soft-gmbh.com/jqGrid/EditableCheckbox1.htm) which is simple modification of the demo from [the answer](http://stackoverflow.com/a/24239416/315935) which I referenced before. It should do what you need. – Oleg Mar 10 '15 at 22:44
@Oleg Thank you this seems to work. ubt in you demo when I click outside the checkbox it still fires event. How to fix that? – NewHistoricForm Mar 10 '15 at 23:04
@NewHistoricForm: It's what you asked in your previous comment: "i want it to make clicking on checkbox column save entire row data". I don't understand what exactly you want. In any way you can easy modify the code inside of `beforeSelectRow` of the demo to any results which you need. – Oleg Mar 10 '15 at 23:39

score 1 · Answer 2 · answered Jun 17 '13 at 06:02

A small correction in the loadComplete: function(). in the demo you can find that even after the checkbox is checked, if you click outside the checkbox in that cell, the value gets changed to 'false' from 'true'.

To avoid this, just give the focus exactly on the checkbox alone by doing the following.

for (i = 1; i < c; i += 1) {
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
        var id = $(e.target).closest('tr')[0].id,
            isChecked = $(e.target).is(':checked');
        alert('clicked on the checkbox in the row with id=' + id +
              '\nNow the checkbox is ' +
              (isChecked? 'checked': 'not checked'));
    });
}

and thanks for the answer :-) (@Oleg) helped me a lot..in time of course.. ;)

This doesn't seem to work. The click event does not fire when using this code. Please advise. — NewHistoricForm, Mar 10 '15 at 19:22

score 0 · Answer 3 · edited Jan 11 '16 at 08:10

To change values of other column based on click of checkbox

var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'),
    rows = this.rows,
    i,
    c = rows.length;

for (i = 1; i < c; i += 1) {
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) {
      var id = $(e.target).closest('tr')[0].id;
      isChecked = $(e.target).is(':checked');
      var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text();
      $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10);
    });
}

JQgrid checkbox onclick update database

3 Answers3

Linked