how do i assign value to columns in jqGird?

Question

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 column value.....and when i loss focus from "rate" field.....the net amount should be calculated and displayed in amount field...

what i need to do here is to assign calculated value to amount field......but i am not getting any idea regarding how do i do it??

what i have done is given below :

var selIRow = 1;
var rowid='';
var iCol='';
$("#purchasedetailsgrid").jqGrid({
    url: sitepath + 'purchase/purchase_grid',
    datatype: 'json',
    mtype: 'POST',
    height:220,
    width:500,
    colNames:["","","Store Name","Item Name","Inner Pkg.","Outer Pkg.","Qty","Rate","Amount"],
    colModel:[
        {name: 'storeID_hidden_field', index:'storeID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
        {name: 'itemID_hidden_field', index:'itemID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}},
        {name:'store_id', index:'store_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
        {name:'item_id', index:'item_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}},
        {name:'inner_pkg', index:'inner_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
        {name:'outer_pkg', index:'outer_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}},
        {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}},
        {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: [
                    {
                        type: 'keydown',
                        fn: function (e) {
                            var key = e.charCode || e.keyCode;
                            if (key == 9)//tab
                            {
                                $('#amount').val();//here in val() i need to write the value of qty and rate field
                            }
                        }
                    }
                ]
            }
        },
        {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10},
            editoptions: {
                dataInit: function (elem) { $(elem).focus(function () { this.select(); }) },
                dataEvents: [
                    {
                        type: 'keydown',
                        fn: function (e) {
                            var key = e.charCode || e.keyCode;
                            if (key == 13)//enter
                            {
                                var grid = $('#purchasedetailsgrid');
                                //Save editing for current row

                                grid.jqGrid('saveRow', selIRow, false, sitepath + 'purchase/purchase_grid');
                                selIRow++;
                                //If at bottom of grid, create new row
                                //if (selIRow++ == grid.getDataIDs().length) {
                                    grid.addRowData(selIRow, {});
                                //}
                                //Enter edit row for next row in grid
                                grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
                            }
                        }
                    }
                ]
            }
        }
    ],
    pager: '#purchasedetailstoolbar',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'inventory_id',
    sortorder: 'desc',
    viewrecords: true,
    rownumbers: true,
    gridview: true,
    multiselect: false,
    autoresize:true,
    autowidth: true,
    editurl: sitepath + 'purchase/purchase_grid',
    toolbar: [true,"top"],
    gridComplete: function () 
    {
        var grid = jQuery("#purchasedetailsgrid");
        var ids = grid.jqGrid('getDataIDs');
        if(ids == '')
        {
            grid.addRowData(selIRow, {});
            grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid');
        }
        for (var i = 0; i < ids.length; i++) 
        {

        }
    },
    caption: 'Purchase List',
}); 
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',{view:false,edit:false,add:false,del:false,search: false});
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar');
jQuery("#purchasedetailsgrid").jqGrid('filterToolbar',{stringResult:false,searchOnEnter : false},{autosearch: true});
var temp_purchase = $("#purchasedetailsgrid_header").html();
$("#t_purchasedetailsgrid").html(temp_purchase);
$("#refresh_purchasedetailsgrid").attr('title',"Reload Grid");

Now can anyone suggest me how will i get value from one column and assign it another?

Any suggestions will be appreciated.

Thnx in advance

Answer 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, Esc
            if ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD &&
                key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) {
                return false;
            }
        }
    },
    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.