CODEWITHSUNDEEP
javascriptjqueryjqgrid
Bruno
Bruno

Reputation: 623

Set a cell value and keep it editable in inline editing

I have to change a cell value by code and keep it editable. With this code, I can change the value of the other cell, but the cell 'paidHour' change to a non-editable state. How to make it editable again?

       editoptions: { dataEvents: [{ type: 'keyup', fn: function (e) {
             var rowId = $(e.target).closest("tr.jqgrow").attr("id");
             var total = parseInt(e.target.value, 10);
             var paidWeek = parseInt($("#List").getCell(rowId, 'paidWeek'), 10);
             var addHourBank = 0;

             if (total >= paidWeek) {
                  addHourBank += (total - paidWeek);
                  total = paidWeek;
             }

             $("#List").setCell(rowId, 'paidHour', total);

Upvotes: 1

Views: 1726

Answers (1)

Oleg
Oleg

Reputation: 221997

I am not sure that I understand you correct. It's important to distinguish editing and editable cells/rows. The editable is the row or the cell which can be edited with respect of form editing, inline editing or cell editing. Probably the cell are editing currently and you want to change the value of the cell. In the case you can't use setCell method. Instead of that you have to get the <td> as DOM or as jQuery wrapper and then set value of the child <input> element of the cell.

For example you can use getColumnIndexByName function defined as following

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

It gets you the index of the column inside of the row. So you can split the line

var rowId = $(e.target).closest("tr.jqgrow").attr("id");

into

var $tr = $(e.target).closest("tr.jqgrow"), rowId = $tr.attr("id");

The $tr represents the jQuery wrapper of the DOM of <tr>. So to get the <td> cell for 'paidHour' you can use

var iCol = getColumnIndexByName ($(this), 'paidHour');
var $td = $tr.find(">td:nth-child(" + (iCol + 1) + ")");

and to change the value of the cell you can use

$td.find("input").val(total);

Upvotes: 3

Related Questions