Getting text part of select instead of value in jqGrid inline editing

Question

In my jqGrid there are 4 select in which two is working fine and two is not working.

Issue : When I use the below snippet :

  var stagevalues = GetStagesValues(); var salesvalues = GetSalesValues(); var owners = GetDataOwnershipValues(); xmlstring = Stages; //.XmlToString(); $("#uxStages").jqGrid({ datatype: 'xmlstring', datastr: xmlstring, mtype: 'GET', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' }, colNames: ['LineNum', 'Star Date', 'Close Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'], colModel: [ { name: 'LineNum', key: true, index: 'LineNum', hidden: false, sortable: false, width: 60 }, { name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90, editable: true, formatter: 'date', formatoptions: { srcformat: 'Ymd', newformat: 'dMy' }, formatter: function (cellValue, opts, rawdata, action) { if (action === "edit") { // input data have format "dd-mm-yy" format - "20-03-2015" var input = cellValue.split("-"); if (input.length === 3) { return input[0] + "-" + input[1] + "-" + input[2]; } } else if (cellValue.length === 8) { // input data have format "yymmdd" format - "20150320" var year = cellValue.substr(0, 4), month = cellValue.substr(4, 2), day = cellValue.substr(6, 2); return day + "-" + month + "-" + year; } return cellValue; // for empty input for example }, editoptions: { dataInit: function (elem) { $(elem).datepicker({ dateFormat: 'dd-My' }); } } }, { name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90, editable: true, formatter: 'date', formatoptions: { srcformat: 'Ymd', newformat: 'dmY' }, formatter: function (cellValue, opts, rawdata, action) { if (action === "edit") { // input data have format "dd-mm-yy" format - "20-03-2015" var input = cellValue.split("-"); if (input.length === 3) { return input[0] + "-" + input[1] + "-" + input[2]; } } else if (cellValue.length === 8) { // input data have format "yymmdd" format - "20150320" var year = cellValue.substr(0, 4), month = cellValue.substr(4, 2), day = cellValue.substr(6, 2); return day + "-" + month + "-" + year; } return cellValue; // for empty input for example }, editoptions: { dataInit: function (elem) { $(elem).datepicker({ dateFormat: 'dd-M-yy' }); } } }, { name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80, editable: true, edittype: "select" }, { name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width: 80, editable: true, edittype: "select" }, { name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 }, { name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100, editable: true, edittype: "text", formatter: 'currency', formatoptions: { thousandsSeparator: ',' } }, { name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90, editable: true, edittype: 'select', formatter: 'select', editoptions: {value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" } }, { name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 }, { name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60, editable: true, edittype: "select", unformat: function (cellValue, opts, rawdata, action) { $('#uxOwner').each(function () { $('option', this).each(function () { // if (opts.rowId == 4) // debugger; var code = $(this).val(); var name = $(this).text(); if (name == cellValue) return code; }); }); } } ], rowNum: 100, viewrecords: true, gridview: true, rownumbers: true, height: 150, loadonce: true, width: 1120, scrollOffset: 0, ondblClickRow: function (rowid) { var grid = $("#uxStages"); var selectedRowId = grid.jqGrid('getGridParam', 'selrow'); lastSelection = selectedRowId; grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages); $('#' + selectedRowId + "_StageKey").css('width', '100%'); $('#' + selectedRowId + "_SalesPerson").css('width', '100%'); $('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%'); $('#' + selectedRowId + "_DocumentType").css('width', '100%'); }, loadComplete: function () { var ids = $("#uxStages").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var id = ids[i]; if (i < ids.length) { $("#uxStages").jqGrid('editRow', id); $("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: salesvalues} }); //Here im fetching values in namedvalue pairs $("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: stagevalues} }); //Here im fetching values in namedvalue pairs $("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: owners} }); //Here im fetching values in namedvalue pairs $("#uxStages").saveRow(id); } } for (var i = 0; i < ids.length; i++) { var id = ids[i]; if (i < ids.length - 1) { // $('#' + $.jgrid.jqID(id)).addClass('not-editable-row'); // $('#' + $.jgrid.jqID(id)).addClass('ui-state-error'); } } }, onSelectRow: function (id) { if (id && id !== lastSelection) { var grid = $("#uxStages"); $('#uxStages').saveRow(lastSelection); } } }).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid'); function OnSuccessEdit_Stages(id, response, options) { var LineNum = $('#uxStages').jqGrid('getCell', id, 'LineNum'); var StartDate = $('#uxStages').jqGrid('getCell', id, 'StartDate'); var ClosingDate = $('#uxStages').jqGrid('getCell', id, 'ClosingDate'); var SalesPerson = $('#uxStages').jqGrid('getCell', id, 'SalesPerson'); //getting text part of select and expected to get value var StageKey = $('#uxStages').jqGrid('getCell', id, 'StageKey'); //getting text part of select and expected to get value var PercentageRate = $('#uxStages').jqGrid('getCell', id, 'PercentageRate'); var MaxLocalTotal = $('#uxStages').jqGrid('getCell', id, 'MaxLocalTotal'); var DocumentType = $('#uxStages').jqGrid('getCell', id, 'DocumentType'); //getting value which is correct var DocumentNumber = $('#uxStages').jqGrid('getCell', id, 'DocumentNumber'); var DataOwnershipfield = $('#uxStages').jqGrid('getCell', id, 'DataOwnershipfield'); //getting value which is correct $oppor.find('Response Data BOM BO SalesOpportunitiesLines row').each(function (index) { if ($(this).find('LineNum').text() == LineNum) { if (LineNum == 4) // $(this).find('StartDate').text(StartDate); // $(this).find('ClosingDate').text(ClosingDate); $(this).find('SalesPerson').text(SalesPerson); $(this).find('StageKey').text(StageKey); $(this).find('PercentageRate').text(PercentageRate); $(this).find('MaxLocalTotal').text(MaxLocalTotal); $(this).find('DocumentType').text(DocumentType); $(this).find('DocumentNumber').text(DocumentNumber); $(this).find('DataOwnershipfield').text(DataOwnershipfield); } }); return true; } 

I am getting text part in first 2 select instead of value where as in the last 2 select it gives me value instead of text which is expected.

I use unformat function also to get the value part, But doesn't work.

I want somebody to point me the issue, I don't know how to deal with such issues.

Thanks in anticipation.

Answer 1

The reason of the problem could be the wrong order of calls editRow and setColProp in the for-loop inside of loadComplete . If you need to change editoptions.value , which will be used during editing, you should use it before the editing will be started. Thus setColProp should be called before editRow .

The call of saveRow directly after call of editRow seems me very suspected. You set salesvalues , stagevalues and owners before you crated the grid (see the lines var salesvalues = GetSalesValues(); and other). So it seems that you can use

{ name: 'SalesPerson', width: 80, editable: true, edittype: "select", 
    editoptions: { value: salesvalues} }

directly in colModel . No loop inside of loadComplete seems be required.