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');
}
};
It's difficult to reproduce your problem because there are no working demo with test data.
I suppose that you used before the code without
formatter: 'select'
and now you added the property to the columnConsignee
. Additionally you changed the data used as input for jqGrid from textes to values (ids). Thus you get now$(this).jqGrid('getCell', rowId, 'Consignee')
the value instead of the text in the Delete dialog. Migration from free jqGrid 4.8.2 to 4.9.2 seems to me independent from the problem.The solution of the problem seems to me in changing the code of
beforeShowForm
which you use in Delete form. After getting the value from the columnConsignee
(by using$(this).jqGrid('getCell', rowId, 'Consignee')
) you have to convert the value to the text usingeditoptions.value
property of the column. You use currently justvalue: eval('(' + g_oConsigneeList + ')')
in your code. So it's unclear for me which format of data you use forvalue
. In any way the usage ofvalue: $.parseJSON('(' + g_oConsigneeList + ')')
seems me better to have less security problems. To convert the value to the text you need to parseeditoptions.value
property. jqGrid allows you different forms of thevalue
. If you use object form for example then you can use the following codeIf you use string form of
editoptions.value
property then you should replace the valueeditVal[val]
to a little more complex code. You will need to spliteditoptions.value
by;
first and to split every resulting element by:
to have value to text mapping. Then you will need find the text which corresponds the value.UPDATED: One more way to get the data from the cell in exactly the form which jqGrid display there is the following:
The helper method
$.jgrid.getDataFieldOfCell
get us the<td>
element or an inner part of the cell if some wrapper are used. One cal then use$cell.text()
to get the required data.