Select List not populating in jqgrid 4.4.4 with dataurl

Question

I have just moved from jqgrid 3.6.5 to version 4.4.4 of the grid. The problem is that my select lists are not populated with dataUrl option and edittype select. Please see the below figure
From the figure you can see that grid has sent two ajax requests to GetManager and GetTerritory but the resultant data is not displayed in select lists. I have added language file, jqgrid.min.js and grid.formedit.js. Below is the code for one of the column models

{ name: 'ManagerId',
                            //sortable: true,
                            index: 'ManagerId',
                            //width: 50,
                            hidden:true,
                            align: 'center',
                            formatter: 'mail',
                            editable: true,
                            edittype: 'select',
                            editoptions: {aysnc:false, dataUrl: '@Url.Action("GetManagers", "Employee")',
                                buildSelect: function (data) {
                                    var response = jQuery.parseJSON(data.responseText);

                                    var s = '<select>';
                                    s += '<option value="0">--No Manager--</option>';
                                    $($.parseJSON(data.responseText)).map(function () {


                                        s += '<option value="' + this.EmployeeId + '">' + this.EmployeeName + '</option>';
                                    });

                                    return s + "</select>";
                                }
                            },
                            editrules: { required: true,edithidden:true },
                            formoptions: { elmsuffix: ' *',label:'Manager' }
                        },

Can anyone suggest what's wrong with it.

Edit 1
server response

[{"EmployeeId":2,"EmployeeName":"Jack"},{"EmployeeId":4,"EmployeeName":"xe"},{"EmployeeId":1001,"EmployeeName":"John"},{"EmployeeId":2000,"EmployeeName":"Jack"},{"EmployeeId":2001,"EmployeeName":"Jill"}]

Response Headers

Cache-Control   private
Connection  Close
Content-Length  203
Content-Type    application/json; charset=utf-8
Date    Thu, 14 Feb 2013 13:20:09 GMT
Server  ASP.NET Development Server/10.0.0.0
X-AspNet-Version    4.0.30319
X-AspNetMvc-Version 3.0

Thanks

Answer 1

First of all I recommend that you examine the type of data parameter inside of buildSelect callback. Depend on some other factors the data could be already object parsed from JSON response. You can just include alert(typeof data.responseText); at the beginning of buildSelect. Alternatively you can use jQuery.isArray to verify whether data parameter is already array of data or one need use jQuery.parseJSON to convert input data to array.

The next problem is that you use jQuery.map instead of jQuery.each. So the code could be about the following

buildSelect: function (response) {
    var data = typeof response === "string" ?
                   $.parseJSON(response.responseText) : response,
        s = "<select>";

    s += '<option value="0">--No Manager--</option>';
    $.each(data, function () {
        s += '<option value="' + this.EmployeeId + '">' + this.EmployeeName +
           '</option>';
    }
    return s + "</select>";
}

You should fix additionally the property aysnc:false of editoptions. Such options is unknown and will be just ignored.