How Do I Assign Value To Columns In Jqgird?

i am using jqGrid with CodeIgniter 2.1.0 . The thing which is making me harassed is how to assign value to specific column on specific event Suppose i am entering qty and rate in

Solution 1:

You current code have many problems. For example you wrote that you need that amount will be calculated based on qty and rate, but you defined some dataEvents in 'rate' and 'amount' columns instead of 'qty' and 'rate' columns. The next problem that you use editRow method directly inside of gridComplete. So the buttons from the inlineNav toolbar will stay in the wrong status. One more problem is that you need to recompute the 'amount' based on 'qty' and 'rate' not only on the loss of focus from 'qty' and 'rate', but also on saving the values on Enter.

To make solving of above problems easier I wrote the demo which you can modify corresponds your exact requirements. The most important part of the demo you can find below:

var editingRowId = undefined,
    recomputeAmount = function () {
        var rate = $("#" + editingRowId + "_rate").val(),
            qty = $("#" + editingRowId + "_qty").val(),
            newAmount = parseFloat(rate) * parseFloat(qty);
        $("#" + editingRowId + "_amount").val(isFinite(newAmount) ? newAmount : 0);
    },
    myEditParam = {
        keys: true,
        oneditfunc: function (id) {
            editingRowId = id;
        },
        afterrestorefunc: function (id) {
            editingRowId = undefined;
        },
        aftersavefunc: function (id) {
            var $this = $(this),
                rate = $this.jqGrid("getCell", id, "rate"),
                qty = $this.jqGrid("getCell", id, "qty"),
                newAmount = parseFloat(rate) * parseFloat(qty);
            $this.jqGrid("setCell", id, "amount", newAmount);
            editingRowId = undefined;
        }
    },
    numInput = {
        type: 'keydown',
        fn: function (e) {
            var key = e.which;
            // allow only '0' <= key <= '9' or key = '.', Enter, Tab, Escif ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD &&
                key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) {
                returnfalse;
            }
        }
    },
    recompute = {
        type: 'focusout',
        fn: function (e) {
            recomputeAmount();
        }
    };
$("#purchasedetailsgrid").jqGrid({
    colModel: [ 
        ...
        {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [ numInput, recompute ]
            }
        },
        {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [ numInput, recompute ]
            }
        },
        {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}}
    ],
    loadComplete: function () {
        var gridIdSelector = '#' + $.jgrid.jqID(this.id);
        if (this.rows.length > 1) {
            //$(this).jqGrid('editRow', this.rows[1].id, myEditParam);
            $(this).jqGrid('setSelection', this.rows[1].id, true);
            setTimeout(function() {
                // we should simulate click of the button not after the grid is loaded, but// after the toolbar with the cliked button will be created by inlineNav
                $(gridIdSelector + "_iledit").click();
            }, 100);
        } else {
            setTimeout(function() {
                // we should simulate click of the button not after the grid is loaded, but// after the toolbar with the cliked button will be created by inlineNav
                $(gridIdSelector + "_iladd").click();
            }, 100);
        }
    }
 }); 
 jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',
     {view:false,edit:false,add:false,del:false,search: false, refreshtitle: "Reload Grid"});
 jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar',
     {edit: true, add: true, editParams: myEditParam, addParams: {addRowParams: myEditParam}});

If it's needed I can comment unclear parts of the code.