jQgrid 4.9.2, In dropdown column, get selected value in custom function instead of selected text

Question

Hello everyone..!!!

I upgraded my jQgrid from version 4.8.2 to 4.9.2. Due to this I am facing problem to get selected value of dropdown column in custom func.

The scenario is, when I go to save record during Add/Edit operation, as per jQgrid work flow, the execution pointer first comes in custom_func: function (value, colName){}. The function parameter value should contain selected value of dropdown, but its gives me selected text.

I google this problem, but I didn't found any relevant solution. I hope someone here have faced same problem and might have found any possible solution.

Here is my jQgrid code,

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",
                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 }, {}, {}, {});
    oGrid.jqGrid('inlineNav', topPagerSelector, {
        addParams: {
            addRowParams: {
                oneditfunc: function (rowid) {
                    updateJqGridButtonState($(this), jqGridMode.Add);
                },
                aftersavefunc: function (rowid, response) {
                    g_bIsDataChanged = true;
                    SavePOFieldsDetails($(this), rowid);
                    updateJqGridButtonState($(this), jqGridMode.None);
                },
                afterrestorefunc: function () {
                    updateJqGridButtonState($(this), jqGridMode.None);
                }
            }
        },
        editParams: myFieldsEditParams
    });  

Answer 1

There are two main scenario used with edittype: "select".

The first one: one want allows the user to choose values from the list. For example, the user sees the grid which some column which have values like "send", "closed", "pending", "paid". No other values should be allowed for the user to be chosen. In the case one can use the options like edittype: "select", editoptions: { value: "send:send;closed:closed;pending:pending;paid:paid" }. It's important to understand, that one uses the values "send", "closed", "pending", "paid" to fill the grid and the same values will be saved in the grid during editing or to be send to the server if editurl not equal "clientArray".

The second scenario: one want to work with ids, but to display some readable texts for the user. For example one hold value 3, 5, 11, 7 internally instead of texts "send", "closed", "pending", "paid". Nevertheless one want to display the value (3, 5, 11, 7) as readable texts for the user. The corresponding options for the column will be formatter: "select", edittype: "select", editoptions: { value: "3:send;5:closed;11:pending;7:paid" }. It's important that one should fill jqGrid with input data having the value 3, 5, 11, 7 instead of the texts "send", "closed", "pending", "paid". In the scenario jqGrid hold values in the cells on the columns, but displays the values as texts for the user. During editing the user have select with the options which looks like <option value="3">send</option>. So the user sees the texts during editing in the same ways like in the grid. After the end of editing jqGrid saves values (the old value 3, 5, 11, 7 could be replaced to the new numeric value from the list). The scenario work in the same way in case of local editing (editurl: "clientArray") and in case of saving the data to the server.

I wrote above only about editing and not about the custom_func callback (specified by usage of the options like editrules: {custom: true, custom_func: function (value, colName, iCol) {...}}). It works here corresponds to the same scenario. If one uses formatter: "select" then the values will be saved in the column and so the values needed be validated. So the values will be forwarded to custom_func as the first parameter. On the other side if one uses the first scenario (without formatter: "select") then the texts will be saved in grid and the texts needed be validated and the texts will be forwarded as the first parameter of custom_func.

Thus you should verify which one from above two scenario you need to implement. If you really need to have values in custom_func then you should use

formatter: "select"

You should don't forget that you should use values for filling of the grid too. In the case only the values will be in the data of the column and the texts will be just displayed to the user to make editing more comfortable of to implement some other requirements, like localization for example. Using formatter: "select" you could for example hold texts "send", "closed", "pending", "paid" internally in the database, but to display the translation of the texts based on the user locale. The user will see and edit only translated texts, but you will save the original values in English.