JQGrid: How can I refresh a dropdown after edit?

Question

In my application, I use JQGrid for loading some contacts data, and when I edit/add an entry I select the contact\'s name from database and then update/add contact.

Answer 1

I think it will be better if you would use dataUrl property of the editoptions instead of usage value property. In the case you will don't need to use synchronous Ajax call inside of onSelectRow to get the select data manually. If the data will be needed the corresponding call will do jqGrid for you.

The URL from dataUrl should return HTML fragment for element including all . So you can convert any other response from dataUrl to the required format implementing the corresponding buildSelect callback function.

On your place I would prefer to return JSON data from the 'MyWebService.asmx/GetOwners' URL instead of XML data which you currently do. In the simplest case it could be web method like

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

If you would use HTTP GET instead of HTTP POST you should prevent usage of data from the cache by setting Cache-Control: private, max-age=0 in the HTTP header. the corresponding code will be

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

Per default jqGrid use dataType: "html" in the corresponding Ajax call (see the source code). To change the behavior to dataType: "json", contentType: "application/json" you should use additionally the ajaxSelectOptions parameter of jqGrid as

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

or as

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

if you will use HTTP POST which is default for ASMX web services.

The corresponding setting for the column in the colModel will be

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

where

var buildSelectFromJson = function (data) {
        var html = '

', d = data.d, length = d.length, i = 0, item; for (; i < length; i++) { item = d[i]; html += '' + item + ''; } html += ''; return html; };

Be careful that the above code use data.d which is required in case of ASMX web services. If you would migrate to ASP.NET MVC or to WCF you will need remove the usage of d property and use data directly.

UPDATED: Here you can download the VS2010 demo project which implements what I wrote above.