Question

i’m trying to use jQuery multiselect plugin in a form editing jqGrid (add form).

This is the code (colModel extract) I’m using to build the dropdown:

{ 
    name: 'CaratteristicheCamera',
    index: 'CaratteristicheCamera', 
    width: 50, 
    hidden: true, 
    edittype: 'select',
    editable: true, 
    editrules: { edithidden: true, required: true }, 
    editoptions: {
        multiselect: true,
        dataUrl: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/GetRoomFeatureList") %>',
        buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="CaratteristicheCamera" name="CaratteristicheCamera">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                    s += '<option value="' + response[i]["Id"] + '">' +
                        response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
        },
        dataInit: function() {
            $("#CaratteristicheCamera").multiselect();
        }
    }

},

As you guys can see, jqGrid call webmethod placed in asmx file. Everything seems to work ok, but I can’t receive all the values user select from the dropdown. It seems that the system send to the server the last selection.
Do u have any tips on it?

EDIT: this is the asmx webservice declaration

[WebMethod]
public string SaveRoom(string id, string codice, string Numero, string NumeroPiano,
                       string Nome, string TipoCamera, string StatoCamera,
                       string CaratteristicheCamera, string TipoSdoppiabilita)
{}

Answer 1

I tried Eric Hynds jQuery UI MultiSelect Widget together with jqGrid 3.4.1 and couldn’t see any problem which you described. I recommend you compare your demo with my to find the differences.

One bad thing which I see in your code is that you set id="CaratteristicheCamera" attribute on the <select> which you generate in buildSelect. You should just use <select> without any additional attributes. The jqGrid will set itself all attributes like id or multiple="multiple".

In the demo I used editurl: 'test.asmx/dummy' which not exist on the server. So one sees the error message like

after choosing and submitting the selected items

Nevertheless one can see with respect of tools like Fiddler, Firebug or Developer Tools of IE or Chrome (see HTTP traffic in “Network” tab) that the demo post the data like

{"name":"test8","closed":"No","ship_via":"FE,TN","oper":"edit","id":"8"}

to the http://www.ok-soft-gmbh.com/jqGrid/test.asmx/dummy. So the values "FE,TN" of selected items FedEx, TNT will be send as expected. In your case the CaratteristicheCamera parameter of SaveRoom should be initialized to the comma separated list of selected values. I hope you will find the problem in your code if you compare my demo with youth.

Another small problem in the code which you posted is that you make serialization to JSON manually in the WebMethod GetRoomFeatureList and returns string. So the string will be serialized to JSON twice. So you use

var retValue = $.parseJSON(data);
var response = $.parseJSON(retValue.d);

Correct will be to return something like List<Room>. ASP.NET will serialize it automatically. If you would use the jqGrid option

ajaxSelectOptions: {
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
}

the data in buildSelect will be not needed to parsed at all. You can directly use data.d[i].Id and data.d[i].Descrizione in the loop. I wrone you about the same problem in another answer on your old question.