JQGrid: ¿Cómo puedo actualizar un menú desplegable después de la edición?

Question

En mi aplicación, uso JQGrid para cargar algunos datos de contactos, y cuando edito/agrego una entrada selecciono el nombre del contacto de la base de datos y luego actualizo/agregué contacto.

Mi problema es que, cuando hago clic en el botón de enviar, quiero actualizar el menú desplegable y los datos que ya se han ingresado para disparar desde la lista desplegable.

Mi código:

para colModel:

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} }, 

que pueblan el menú desplegable en Seleccionar fila (que cuando selecciono una fila, el menú desplegable se actualizará)

onSelectRow: function (id) { 
       var advOwners = $.ajax({ 
        type: 'POST', 
        data: {}, 
        url: 'MyWebService.asmx/GetOwners', 
        async: false, 
        error: function() { 
         alert('An error has occured retrieving Owners!'); 
        } 
       }).responseXML; 

       var aux = advOwners.getElementsByTagName("string"); 
       ownersList = ""; 
       for (var i = 0; i < aux.length; i++) { 
        ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; '; 
       } 
       ownersList = ownersList.substring(0, ownersList.length - 2); 

       jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} }); 
      } 

Pero cuando ingreso nuevamente el formulario editar/agregar, el menú desplegable no se actualiza, tiene los elementos que se han cargado en primer lugar.

¿Algún ayuda?

Gracias, Jeff

Answer 1

creo que será mejor si usted utilizaría dataUrl propiedad del editoptions lugar de uso value propiedad. En este caso, no será necesario utilizar la llamada síncrona Ajax dentro de onSelectRow para obtener los datos seleccionados manualmente. Si los datos serán necesarios, la llamada correspondiente hará jqGrid por usted.

El URL de dataUrl debe devolver el fragmento de HTML para el elemento <select> incluyendo todos <options>. Por lo tanto, puede convertir cualquier otra respuesta desde dataUrl al formato requerido implementando la función de devolución de llamada buildSelect correspondiente.

En su lugar, preferiría devolver los datos JSON de la URL 'MyWebService.asmx/GetOwners' en lugar de los datos XML que actualmente utiliza. En el caso más sencillo podría ser el método web como

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

Si desea utilizar HTTP GET en lugar de POST HTTP que debe evitar el uso de datos de la caché fijando Cache-Control: private, max-age=0 en la cabecera HTTP. el código correspondiente será

[WebMethod] 
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

por defecto jqGrid usar dataType: "html" en el correspondiente llamada Ajax (ver the source code). Para cambiar el comportamiento de dataType: "json", contentType: "application/json" se debe utilizar, además, el parámetro de ajaxSelectOptions jqGrid como

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' }, 

o como

ajaxSelectOptions: { 
    contentType: "application/json", 
    dataType: 'json', 
    type: "POST" 
}, 

si va a utilizar HTTP POST que es por defecto para los servicios web ASMX.

El ajuste correspondiente de la columna en el colModel será

edittype: 'select', editable: true, 
editoptions: { 
    dataUrl: '/MyWebService.asmx/GetSelectData', 
    buildSelect: buildSelectFromJson 
} 

donde

var buildSelectFromJson = function (data) { 
     var html = '<select>', d = data.d, length = d.length, i = 0, item; 
     for (; i < length; i++) { 
      item = d[i]; 
      html += '<option value=' + item + '>' + item + '</option>'; 
     } 
     html += '</select>'; 
     return html; 
    }; 

tener cuidado de que el código anterior data.d uso que se requiere en el caso de los servicios web ASMX. Si desea migrar a ASP.NET MVC oa WCF, deberá eliminar el uso de la propiedad d y usar data directamente.

ACTUALIZADO: Here puede descargar el proyecto de demostración VS2010 que implementa lo que escribí anteriormente.