free jQgrid 4.9.2, On delete confirmation box show

Question

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');
  }
 };

Answer 1

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 column Consignee. 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 column Consignee (by using $(this).jqGrid('getCell', rowId, 'Consignee')) you have to convert the value to the text using editoptions.value property of the column. You use currently just value: eval('(' + g_oConsigneeList + ')') in your code. So it's unclear for me which format of data you use for value. In any way the usage of value: $.parseJSON('(' + g_oConsigneeList + ')') seems me better to have less security problems. To convert the value to the text you need to parse editoptions.value property. jqGrid allows you different forms of the value. If you use object form for example then you can use the following code

beforeShowForm: function ($form) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        val = $self.jqGrid("getCell", p.selrow, "Consignee"),
        cm = p.colModel[p.iColByName.Consignee],
        editVal = cm.editoptions.value;
    $("td.delmsg", $form[0]).html("Do you really want delete the <b>   Consignee: " +
        editVal[val] + "</b>?");
}

If you use string form of editoptions.value property then you should replace the value editVal[val] to a little more complex code. You will need to split editoptions.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:

beforeShowForm: function ($form) {
    var $self = $(this), p = $self.jqGrid("getGridParam"),
        tr = $self.jqGrid("getGridRowById", p.selrow),
        $cell = $.jgrid.getDataFieldOfCell.call(this, tr, p.iColByName.Consignee);

    $("td.delmsg", $form[0]).html("Do you really want delete the <b>   Consignee: " +
        $cell.text() + "</b>?");
}

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.