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}

Corcovado

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.

Englebert

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 – Corcovado

@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 or this one – Englebert

@Englebert How to make it so that it focuses only on the Checkbox? – Fishing

@NewHistoricForm: Sorry, but I don't understand what you mean. In any way the answer is old. I find the solution from the answer better. – Englebert

@Englebert 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. – Fishing

@NewHistoricForm: Try the demo which is simple modification of the demo from the answer which I referenced before. It should do what you need. – Englebert

@Englebert Thank you this seems to work. ubt in you demo when I click outside the checkbox it still fires event. How to fix that? – Fishing

@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. – Englebert

Answer 2

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

Longship

This doesn't seem to work. The click event does not fire when using this code. Please advise. – Fishing

Answer 3

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

Lewert