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 check

Answer 1

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.

Answer 2

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);
    });
}

Answer 3

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.. ;)