jquery - 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.

My problem is that, when I click the submit button I want to refresh the dropdown and the data that has been already entered to dispaear from dropdown list.

My code:

for colModel:

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

I populate the dropdown on select row (that when I select a row, the dropdown will be refreshed)

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} });
             }

But when I enter the edit/add form again, the dropdown it's not refreshed, it has the items that has been loaded in the first place.

Any help?

Thanks, Jeff

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 <select> element including all <options>. 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<string> GetSelectData() {
    return new List<string> {
        "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<string> GetSelectData() {
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0));
    return new List<string> {
        "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 = '<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;
    };

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.