NOTE: As per Oleg suggestion I have implemented a formatter: 'select' property to dropdown to get selected Id in custom func
I upgraded my jQgrid from version 4.8.2 to 4.9.2. Due to this I am facing problem while deleting any record of drop-down column.
While deleting a record, I display a message box to take confirmation from user. In that message box I want show the selected text value of dropdown which I want delete. But instead of showing text value its showing me the selected value (GUID) like this :
But I want to show selected text of that dropdown. To get more clarity as per coding perspective I am pasting my jQgrid code
function RenderPOFieldsGrid() {
if (g_bEditMode) {
var oGrid = $('#tbPOFields'), topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager", lastSel;
oGrid.jqGrid({
url: sRelativePath + '/WSAjax.asmx/GetDataForGridInEdit',
mtype: "POST",
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
serializeGridData: function (data) {
return JSON.stringify(data);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colNames: ['ConsigneeId', 'Consignee'],
colModel: [
{ name: 'ConsigneeId', index: 'ConsigneeId', hidden: true },
{ name: 'Consignee', index: 'Consignee', sortable: false, title: false, width: 42, editable: true, edittype: 'select', formatter: 'select',
editrules: {
required: true,
custom: true,
custom_func: function (value, colName) {
if ($('#tbItems_Consignee').length === 1) {
var selrow = $('#tbItems').jqGrid('getGridParam', 'selrow');
$('#tbItems').jqGrid('setCell', selrow, 'ConsigneeId', value);
}
if (g_bEditMode && value === g_sValueNONE && !g_bIsOrderType_Maintenance)
return [false, " is an invalid Consignee.<br/>Please select a valid Consignee before saving."];
else {
return [true, ""];
}
}
},
editoptions:
{
value: eval('(' + g_oConsigneeList + ')'),
dataEvents: [
{ type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } },
{
type: 'change',
fn: function (e) {
if (!e.isTrigger) {
var selrow = $('#tbItems').jqGrid('getGridParam', 'selrow');
var ConsigneeId = $(this).val();
$('#tbItems').jqGrid('setCell', selrow, 'ConsigneeId', ConsigneeId);
}
}
}]
}
}
],
prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection" },
autowidth: true,
postData: {
filters: null,
spName: 'GetPOFieldsDetailsList',
paramXML: ''
},
width: 'auto',
height: 'auto',
rowNum: 1000,
rowList: [1000],
sortname: "",
sortorder: "asc",
page: 1,
gridview: true,
toppager: true,
autoencode: true,
ignoreCase: true,
viewrecords: true,
caption: 'Fields',
editurl: 'clientArray',
emptyrecords: "No records to view.",
footerrow: true,
onSelectRow: function (rowid) {
if (rowid && rowid != lastSel) {
if (typeof lastSel !== "undefined") {
$(this).jqGrid('restoreRow', lastSel);
}
lastSel = rowid;
}
}
});
oGrid.jqGrid('navGrid', topPagerSelector, { add: false, edit: false, search: false, refresh: false }, {}, {}, myDelParams, {});
oGrid.jqGrid('inlineNav', topPagerSelector, {
addParams: myFieldAddParams
editParams: myFieldsEditParams
});
}
}
var myDelParams = {
processing: true,
// because I use "local" data I don't want to send the changes
// to the server so I use "processing:true" setting and delete
// the row manually in onclickSubmit
onclickSubmit: function (options, rowid) {
var gridId = $.jgrid.jqID($(this)[0].id);
// reset the value of processing option which could be modified
options.processing = true;
DeleteExpenseDetails(rowid);
$.jgrid.hideModal("#delmod" + gridId,
{ gb: "#gbox_" + gridId,
jqm: options.jqModal, onClose: options.onClose
});
return true;
},
beforeShowForm: function ($form) {
var rowId = $(this).jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Do you really want delete the <b> Consignee: " + $(this).jqGrid('getCell', rowId, 'Consignee') + "</b>?");
},
afterShowForm: function ($form) {
var dialog = $form.closest('div.ui-jqdialog'),
selRowId = $(this).jqGrid('getGridParam', 'selrow'),
selRowCoordinates = $('#' + selRowId).offset();
dialog.offset(selRowCoordinates);
dialog.css('width', 'auto');
}
};