Can't get the object from a cell in jqGrid (jQuery)

Question

This is the issue, when I define the ddl (drop down list or select box) I don't know the selected value. When a user edits a row, the user can select an item from the list. But the selected item isn't set. I want to set the selected item when the user clicks a button to edit the row.

The proper way, I think, is to get the ddl that was created when the jqGrid was built and set the selected value.

$("#list").jqGrid({
  datatype: 'clientSide',
  colNames: ['Edit', 'Delete', 'Save', 'Cancel', 'Location'],
  colModel: [
             ....
             ....
        { name: 'Location', index: 'Location', width: 90, editable: true, edittype: "select", editoptions: { value: SI:System Integration ; IM:Information Management ; IA:Industrial Automation ; CI:Custom Instrumentation}}]
});

When the user clicks the edit button I get the data from ddl list

var locationText = $("#list").getRowData(rowNum).Location;

locationText  =    
<SELECT id=1_Location class=editable><OPTION value="R         ">Rochester</OPTION><OPTION selected value="MA        ">Massachusetts</OPTION><OPTION value="DL        ">Data Librarian</OPTION><OPTION value="Buff      ">Buffalo /  Niagara Falls</OPTION><OPTION value="Bing      ">Binghamton / Owego / Southern Tier</OPTION><OPTION value="Other     ">All other locations</OPTION><OPTION value="Alb       ">Albany and all points East</OPTION><OPTION value=""></OPTION></SELECT>

Instead of getting the data from the cell in the jqGrid I would rather get the dom ddl element object.

The other idea I had, but don't think is right, is to use locationText and use that to create a new ddl dom element.

something like this.

var locationTmp2 = document.createElement("select");
locationTmp2.innerHTML = locationText;
or 
locationTmp2.text= locationText;

Is there an easy way to do what I'm trying to do. I know I could create a new dom select element then add each option to it, like this

  //populate and set the selected item for locations.
  var locationSelect = document.createElement("select");
  var arrayLocations = ('R:Rochester;MA:Massachusetts;DL:Data Librarian;Buff:Buffalo/Niagara Falls;Bing :Binghamton / Owego / Southern Tier;Other:All other locations;Alb:Albany and all points East;').split(";");
  for (var i = 0; i < arrayLocations.length - 1; i++) {
   var optionItem = document.createElement("option");
   optionItem.value = trim(arrayLocations[i].split(":")[0]);
   optionItem.text = trim(arrayLocations[i].split(":")[1]);
   //check if this should be the selected item.
   if (arrayLocations[i].indexOf(rowData.Location) != -1)
    optionItem.selected = true;
   locationSelect.add(optionItem);
  }

but there should be a way to grab the entire dom element from jqGrid.

Thanks

Answer 1

The element id will be equal to the column name that you defined in colModel. In your case, $("#Location") will give you the element you want and you can go from there.

Also, be sure you use the right event to handle this - either beforeShowForm or onInitializeForm depending on what you need. Here is a good discussion of it with example.