How to get select's value in jqGrid when using <select> editoptions on a column

Question

I have a couple of columns in jqGrid with edittype="select". How can I read the option value of the value currently selected in a particular row?

e.g.: When I provide the following option, how do I get "FE" for FedEx, etc.

editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” } 

getRowData() for the rowId/cellname returns only the text/displayed component of the select.

If I set a "change" data event on the column, the underlying fires change events only on mouse clicks, and not keyboard selects (there's numerous references to generic selects and mouse/keyboard issues).

Bottomline, when a new value is selected, I need to know the option value at the time of the change, and also prior to posting to the server.

Girdle

possible duplicate of How to get a jqGrid cell value – Lorna

Answer 1

The documentation for getRowData states:

Do not use this method when you editing the row or cell. This will return the cell content and not the actuall value of the input element

Is the row still being edited when you call getRowData()?

Update

Agreed, jqGrid does not handle <select> very well. In my application I actually was able to get around this by not specifying an edit option (meaning, key/value were both "FedEx"); the translation to ID is then done on the server. This is not the right way to code this, but it worked well enough for my needs at the time.

Urethroscope

no. the call to getRowaData() is made after editing, e.g. when stuffing row data into a json object to send to the server. Its just that there is absolutely no mention in the docs about getting underlying option values for selects, except by binding to change events, which in general, is flaky on <select> – Girdle

Yeah, I agree as well. I think I will revert to mapping the displayed value (which is the registered value) back to the key server side. Downside is that values need to be unique. – Girdle

BTW, the event afterSaveCell(rowid, cellname, value, iRow, iCol) does return the <option> in value. – Girdle

Good to know. Did you end up using this approach, then? – Urethroscope

Answer 2

You have to set the formatter of the column to 'select'

Example from the wiki:

colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]

See more here jqgridwiki

I was having the same problem and this worked like a charm

Hedvah

I was running into the exact same issue and added the formatter:'select' to my colModel and this fixed the problem as well. – Newport

Answer 3

I just solved this question by using setting JqGrid unformat option and use the following function for unformatting cell value.

function Unformat_Select(cellvalue, options, cellobject)
{
    var unformatValue = '';

    $.each(options.colModel.editoptions.value, function (k, value)
    {
        if (cellvalue == value)
        {
            unformatValue = k;
        }
    });

    return unformatValue;
}

The above method will be called everytime when grid need cell data like when you call "getRowData" method. However, my function only support key-paired value edit option. You need to change your data like the following pattern.

editoption: 
{
    value:
    {
        FE:'FedEx', 
        IN:'InTime', 
        TN:'TNT'
    }
}

For more information about unformat option, you can see at the following link.

JqGrid Wiki - Custom Formatter

PS. It's possible to modify my function to support client-side dropdownlist value. But I think it's impossible to apply this function for server-side dropdownlist value.

Update

In the latest jqGrid 3.8.1, I just found some bug when user cancel editing row(or programmatically call "restoreRow" method), jqGrid will create label by using key of data (instead of value of data). I create the following function to fix this issue. For use this, you must it as custom formatter function of this column. This function maps cell value to value of list by comparing key or value.

function JqGridInlineEditor_SelectFormatter(cellvalue, options, rowObject)
{
    var temp = '';
    $.each(options.colModel.editoptions.value, function (key, value)
    {
        if (cellvalue == key || cellvalue == value)
        {
            temp = value;
            return false;
        }
    });

    return temp;
}

So, you can send key or value as column data to be rendered by the above custom formatter.

Bronchia

Answer 4

If in case you have requirement where each row has dropdown and it has values like

FE:'FedEx', IN:'InTime', TN:'TNT'

Now instead of saving the data to backend on dropdown change event;you want to save data on "Save" button click at row level but want to save dropdwon selected value (TN) not display text(TNT). You can create another hidden field to set selected country code on inline editing of dropdown. Here when user exit after cell inline editing afterSaveCell method will be called and you can set it as mentioned in below code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>https://mcmap.net/q/1624611/-jqgrid-setcell-calculated-value/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint devel: true, browser: true, plusplus: true, nomen: true, unparam: true */
        $(document).ready(function () {
            'use strict';
            var listOptions = "CN:Canada; US:United States; FR:France; IN:India";
                var mydata = [{
                    name: "Toronto",
                    country: "CN",
                    continent: "North America",
                    countrycode: "CN"
                }, {
                    name: "New York City",
                    country: "US",
                    continent: "North America",
                    countrycode: "US"
                }, {
                    name: "Silicon Valley",
                    country: "US",
                    continent: "North America",
                    countrycode: "US"
                }, {
                    name: "Paris",
                    country: "FR",
                    continent: "Europe",
                    countrycode: "FR"
                }, {
                    name: "Pune",
                    country: "IN",
                    continent: "Asia",
                    countrycode: "IN"
                }]

                $("#gvManageMapping").jqGrid({
                    data: mydata,
                    datatype: "local",
                    colNames: ["Name", "Country", "Continent", "countrycode"],
                    colModel: [{
                        name: 'name',
                        index: 'name',
                        editable: false,
                    },
                    {
                        name: 'country',
                        index: 'country',
                        editable: true, edittype: "select", formatter: 'select', editoptions: {
                            value: listOptions,
                        }, editrules: { required: true, integer: false }, formatter: "select"
                    },
                    {
                        name: 'continent',
                        index: 'continent',
                        editable: false,
                    },
                    {
                        name: 'countrycode',
                        index: 'countrycode',
                        editable: false
                    }],
                    afterSaveCell: function (rowid, cellname, value) {
                            var selectedCountryCode, $this;
                            if (cellname === 'country') {
                                $this = $(this);
                                selectedCountryCode = $this.jqGrid("getCell", rowid, 'country');
                                $this.jqGrid("setCell", rowid, 'countrycode', selectedCountryCode);
                            }
                        },
                    pager: '#pager',
                    'cellEdit': true,
                    'cellsubmit': 'clientArray',
                    editurl: 'clientArray'
                });
        });
    //]]>
    </script>
</head>
<body>
    <table id="gvManageMapping"><tr><td /></tr></table>
    <div id="pager"></div>
</body>
</html>

Xanthein