Get the client side value of a grid cell containing a <select>

Question

I am trying to write a jquery function that scans the whole of a jqrid to check if any of its cells have a value.

The issue I am having is that there does not seem to be a way of retrieving the selected value of a cell that contains a select box. The jqgrid docs clearly states the following for the getCell and getRowData methods.

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

Which is fair enough, but given that, how do I actually get the value?

Its not possible to parse the html that is returned from the select content, as none of the options are flagged as selected, even if they appear to be selected in the browser.

For reference here is a snippet of my code:

var colModels = this.grid.jqGrid('getGridParam', 'colModel');
for (i = 1; i < colModels.length; i++) {
            var colModel = colModels[i];
            if (colModel.edittype == 'select') {
                var colData = this.grid.jqGrid('getCol', colModel.name, false);
                for (j = 0; j < colData.length; j++) {
                    if (colData[j] != 0) {
                        //alert("select change: " + colData[j]);
                        //alert(j+' GridName_' + colModel.name)
                        //alert("select change: " + $('#GridName_' + colModel.name).val());
                        //return has value?;
                    } 
                }
            }
        }

Column definiton:

{ name: "AppleId", index: "Appled", width: 150, align: "left", resizable: false, editable: true, edittype: "select", editoptions: { value: function() { return xxx.buildAppleSelect(); } }, formatter: function(cellvalue, options, rowObject, action) { return xxx.buildAppleSelectHtml(cellvalue); } };

I also experimented with afterEditCell and other similar events - but the problem with these is that - clicking the select box does not put the sell in edit mode - you have to click the cell first and then the select.

In short - how do I get the selected value, client side - can it be done?

There are simular questions here, here and here. But none seem to tackle the issue (client side).

Answer 1

No. Here is some HTML that I obtained from a test grid using getRowData:

<select class="editable" size="1" name="test" id="5_test">
 <option value="0">Zero</option>
 <option value="1">One</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
</select>

You are right - there is not enough information in the markup to determine which value is selected. In order to get the selected value you will have to bring the row out of edit mode, for example by using grid method saveRow.

Answer 2

It seems to me Dan that you thy to go in a wrong way. I am not really understand why you do want to have grid cell containing of <select>, but if you'll explain me what do you want I am sure I'll find a solution of you problem.

First I explain what I find strange in your question. If you define edittype: "select", then jqGid has typically a string and not a <select> element inside. If you are in en edit mode (for example in inline edit mode), then all other rows excepting selected row has also a string and not a <select> element inside. If user make a chose and press enter, the edit mode will be ended and the modified data will be saved (or send to the server). So it is also not important which values were displayed before.

It seems to me you have some problems because of some custom building of values in buildAppleSelect and custom formatting in buildAppleSelectHtml.

If you be want see intermediate values from select you can use dataEvents with 'change' in the editoptions.

I hope now you understand what I find strange in your question. If you explain me what is your problem and why you do have more then one <select> element and want to read intermediate select values I'll try to find a solution for you.

UPDATED: I posted a code which shows how use dataEvents with 'change' in http://stackoverflow.com/questions/3213330/jqgrid-inline-editing-filter-subcategory-dropdown-list-based-on-another-categor/3221372#3221372. Probably it will help you.