Jqgrid Change Values Of Editable Cell On Change Of Another Cell (dependent Columns)

This is the grid. My discount column has an autocomplete which has values coming from another json variable. This is my json array where the data for discount is coming from. [

Solution 1:

You don't provided a working demo, but I hope that I still understand you correctly.

I think that you want to change the value of not-editable columns POD_UnitCost and POD_ExtCost on selection of the value in the jQuery UI Autocomplete control in editable POD_VendorDiscount. The value of another editable columns POD_OrderQty and POD_VendorListPrice will be used during calculations. The current code from select callback of autocomplete

var rowData = $('#list').jqGrid('getRowData', rowid);
cont = rowData.POD_VendorListPrice;
console.log(cont);
rowData.POD_ExtCost = (1-ui.item.id)*cont;

is incorrect. The first problem is the usage of getRowData to access of columns which are at the moment in inline editing mode. It's wrong. getRowData will get you HTML fragment from the cells instead of value of the corresponding <input> element. The second error: you just set POD_ExtCost of rowData object without any additional actions. It's not changes the value in POD_ExtCost column. What you should do instead: you can use getRowData and setRowData to get/set values of not editing columns and you have to get <input> elements of editing element and get its value to get the current editing value.

I can't test the below code, but the correct way could be for example the following

dataInit: function(elem) {
    var $self = $(this), // save the reference to the grid
        $elem = $(elem); // save the reference to <input>
    $elem.autocomplete({
        source: autocompleteSource,
        select: function (event, ui) {
            var $tr = $elem.closest("tr.jqgrow"), newCost, rowid = $tr.attr("id"),
                orderQty = parseFloat($tr.find("input[name=POD_OrderQty]").val()),
                listPrice = parseFloat($tr.find("input[name=POD_VendorListPrice]").val());
            if (ui.item) {
                console.log(orderQty);
                console.log(listPrice);
                newCost = (1 - parseFloat(ui.item.id)) * listPrice;
                $self.jqGrid("setRowData", rowid, {
                    POD_UnitCost: newCost,
                    POD_ExtCost: orderQty * newCost
                });
            }
        },
        minLength: 0,
        minChars: 0,
        autoFill: true,
        mustMatch: true,
        matchContains: false,
        scrollHeight: 220
    }).on("focus", function(event) {
        $(this).autocomplete("search", "");
    });
}

I should remark that the above code works only for inline editing.