javascript - jqgrid change values of editable cell on change of another cell (dependent columns) -
this grid. 
my discount column has autocomplete has values coming json variable.
this json array data discount coming from.
[ {"id":0.56,"label":"adams rite less 50\/12","value":"adams rite less 50\/12"}, {"id":0.44,"label":"assa less 44","value":"assa less 44"}, {"id":0.603,"label":"baron accessories , sticks less 60.3","value":"baron accessories , sticks less 60.3"}, {"id":0.704,"label":"baron std , custom doors less 70.4","value":"baron std , custom doors less 70.4"}, {"id":0.617,"label":"baron std , custom frames less 61.7","value":"baron std , custom frames less 61.7"}, {"id":0.704,"label":"baron std pallet doors less 70.4","value":"baron std pallet doors less 70.4"}, {"id":0.145,"label":"bobrick 10\/5","value":"bobrick 10\/5"}, {"id":0.6175,"label":"bremner hmd","value":"bremner hmd"}, {"id":0.6073,"label":"bremner hmf","value":"bremner hmf"}, {"id":0.44,"label":"eff eff less 44","value":"eff eff less 44"} ] what
(1)upon changing value of discount cost column should change according formula
new cost = (1-0.145)*list price cell's value (in case 999) the value 0.145 coming id column of json.
(2)upon changing value of discount extcost column should change according this.
new ext cost = quantity * new cost quantity cell on extreme left.
here grid related code.
var lastsel2; jquery(document).ready(function(){ var autocompletesource; $.getjson("{{ asset('app_dev.php/getdiscount') }}", function(json){ autocompletesource = json; }); var cont; jquery("#list").jqgrid({ url: "{{ asset('/app_dev.php/_thrace-datagrid/data/view_po_details') }}", postdata: { mastergridrowid: {{ editid }} }, datatype: "json", mtype: 'post', colnames: ['', 'released', 'attachments', 'quantity', 'received', 'item #', 'vendor item #', 'list price', 'discount', 'cost', 'extcost', 'lead time', 'system key', 'po item note', 'po required date', 'confirm #','confirm date', 'vq #', 'reference', 'vq ref', 'uom', 'type', 'last update', 'updated by', 'fsc', 'door #', 'queue', 'rte#'], colmodel: [ { name: "pod_uiselected", index: "o.pod_uiselected", editable: true, edittype: 'checkbox', editoptions: {value: "true:false"}, formatter: "checkbox", formatoptions: {disabled: false}, align: 'center', jsonmap: "cell.0", width: '70' }, { name: "pod_released", index: "o.pod_released", editable: true, edittype: 'checkbox', editoptions: {value: "yes:no"}, formatter: "checkbox", formatoptions: {disabled: false}, align: 'center', jsonmap: "cell.1", width: '70' }, { name: "i_linkhasfiles", index: "o.i_linkhasfiles", editable: false, edittype: 'checkbox', editoptions: {value: "true:false"}, formatter: "checkbox", formatoptions: {disabled: true}, align: 'center', jsonmap: "cell.2", width: '70' }, { name: "pod_orderqty", index: "o.pod_orderqty", editable: true, align: 'center', jsonmap: "cell.3", width: '100' }, { name: "pod_qtyreceived", index: "o.pod_qtyreceived", editable: true, align: 'center', jsonmap: "cell.4", width: '100' }, {name: "pod_itemnumid #", index: "o.pod_itemnumid", editable: false, align: 'center', jsonmap: "cell.5"}, { name: "pod_vendoritemnum", index: "o.pod_vendoritemnum", editable: false, align: 'center', jsonmap: "cell.6" }, { name: "pod_vendorlistprice", index: "o.pod_vendorlistprice", editable: true, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsseparator: ','}, jsonmap: "cell.7" }, { name: "pod_vendordiscount", index: "o.pod_vendordiscount", editable: true, jsonmap: "cell.8", editoptions: { datainit: function(elem) { var $self = $(this), // save reference grid $elem = $(elem); // save reference <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) { var self = this; $(self).autocomplete( "search", ""); }); } } }, { name: "pod_unitcost", index: "o.pod_unitcost", editable: false, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsseparator: ','}, jsonmap: "cell.9" }, { name: "pod_extcost", index: "o.pod_extcost", editable: false, align: 'center', formatter: 'currency', formatoptions: {prefix: '$', suffix: '', thousandsseparator: ','}, jsonmap: "cell.10" }, {name: "pod_leadtime", index: "o.pod_leadtime", editable: false, jsonmap: "cell.11"}, { name: "pod_stocked", index: "o.pod_stocked", editable: false, edittype: 'checkbox', editoptions: {value: "true:false"}, formatter: "checkbox", formatoptions: {disabled: true}, align: 'center', jsonmap: "cell.12" }, {name: "pod_note", index: "o.pod_note", editable: true, jsonmap: "cell.13"}, { name: "pod_reqdate", index: "o.pod_reqdate", editable: true, jsonmap: "cell.14.date", editoptions:{size:20, datainit:function(el){ $(el).datepicker({dateformat:'yy-mm-dd'}); }, defaultvalue: function(){ var currenttime = new date(); var month = parseint(currenttime.getmonth() + 1); month = month <= 9 ? "0"+month : month; var day = currenttime.getdate(); day = day <= 9 ? "0"+day : day; var year = currenttime.getfullyear(); return year+"-"+month + "-"+day; } } }, {name: "pod_confrmnum", index: "o.pod_confrmnum", editable: true, jsonmap: "cell.15"}, { name: "pod_promdate", index: "o.pod_promdate", editable: true, jsonmap: "cell.16.date", editoptions:{size:20, datainit:function(el){ $(el).datepicker({dateformat:'yy-mm-dd'}); }, defaultvalue: function(){ var currenttime = new date(); var month = parseint(currenttime.getmonth() + 1); month = month <= 9 ? "0"+month : month; var day = currenttime.getdate(); day = day <= 9 ? "0"+day : day; var year = currenttime.getfullyear(); return year+"-"+month + "-"+day; } } }, {name: "vq_pk", index: "o.vq_pk", editable: false, jsonmap: "cell.17"}, {name: "pod_reftext", index: "o.pod_reftext", editable: false, jsonmap: "cell.18"}, {name: "vq_vref", index: "o.vq_vref", editable: false, jsonmap: "cell.19"}, {name: "pod_uom", index: "o.pod_uom", editable: false, jsonmap: "cell.20"}, {name: "pod_itemtype", index: "o.pod_itemtype", editable: false, jsonmap: "cell.21"}, {name: "pod_dateupdated", index: "o.pod_dateupdated", editable: false, jsonmap: "cell.22.date"}, {name: "pod_updatedsysuser", index: "o.pod_updatedsysuser", editable: false, jsonmap: "cell.23"}, {name: "i_fsc", index: "o.i_fsc", editable: false, jsonmap: "cell.24"}, {name: "pjd_numid", index: "o.pjd_numid", editable: false, jsonmap: "cell.25"}, {name: "pod_queuesourcetext", index: "o.pod_queuesourcetext", editable: false, jsonmap: "cell.26"}, {name: "rtp_pk_e", index: "o.rtp_pk_e", editable: false, jsonmap: "cell.27"} ], beforeselectrow: function (rowid, e) { var $target = $(e.target), $td = $target.closest("td"), icol = $.jgrid.getcellindex($td[0]), colmodel = $(this).jqgrid("getgridparam", "colmodel"); if (icol >= 0 && $target.is(":checkbox")) { if(colmodel[icol].name == "pod_uiselected") { $('#list').setselection(rowid, true); $("#list").jqgrid('saverow', rowid, { //same rowid value used in 'addrowdata' method above succesfunc: function (response) { $('#list').trigger( 'reloadgrid' ); return true; } }) } } return true; }, onselectrow: function(id){ if(id && id!==lastsel2){ jquery('#list').jqgrid('restorerow',lastsel2); jquery('#list').jqgrid('editrow',id,true); lastsel2=id; } }, jsonreader: {repeatitems: false}, height: 400, rownum: 50, rowtotal: 1000000, autowidth: true, gridview: true, autoencode: false, pager: '#pager', shrinktofit: true, sortable: true, sortname:"o.pod_reqdate", sortorder: "desc", viewrecords: true, //multiselect: true, loadonce:false, rowlist: [50, 100, 500, 1000], editurl: "{{ asset('/app_dev.php/_thrace-datagrid/row-action/view_po_details') }}" }); jquery("#list").jqgrid('navgrid',"#pager",{ del:false, add:false, edit:false}, {editdata: {po_pk: {{ editid }}}}, {editdata: {po_pk: {{ editid }}}}, {editdata: {po_pk: {{ editid }}}}, {multiplesearch:true} ); jquery("#list").jqgrid('filtertoolbar',{stringresult: true,searchonenter : true}); jquery('#list').jqgrid('gridresize'); $("#productedit_v_pk").prop("disabled", true); });
you don't provided working demo, hope still understand correctly.
i think want change value of not-editable columns pod_unitcost , pod_extcost on selection of value in jquery ui autocomplete control in editable pod_vendordiscount. value of editable columns pod_orderqty , pod_vendorlistprice used during calculations. current code 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. first problem usage of getrowdata access of columns @ moment in inline editing mode. it's wrong. getrowdata html fragment cells instead of value of corresponding <input> element. second error: set pod_extcost of rowdata object without additional actions. it's not changes value in pod_extcost column. should instead: can use getrowdata , setrowdata get/set values of not editing columns , have <input> elements of editing element , value current editing value.
i can't test below code, correct way example following
datainit: function(elem) { var $self = $(this), // save reference grid $elem = $(elem); // save reference <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 above code works inline editing.
Comments
Post a Comment