asp.net jqGrid dropdown multiselect

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

Siphonostele

Could you specify more exactly which from "multiselect" plugins you try to use. Is it Eric Hynds jQuery UI MultiSelect Widget? Could you describe the existing problem more detailed? You wrote "I can't receive all the values user select from the dropdown". Are the list of users selections are cut? You wrote additionally about another problem "the system send to the server the last selection". Do you mean previous selection? So that if you open the form at the second time the first selections of the user will be sent to the server? – Elevon

yes, i'm using Eric Hynds library (v 1.12). What happens is that i click on the plus icon to add new entity; it appears the form, I can fill all the fields in it and I can select multiple items on the CaratteristicheCamera dropdown. Then I click on save button and the system call the asmx webmethod BUT in the parameter I see, through debug, just the last selected item. (i edited my question) – Siphonostele

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.

Elevon

bug was in the dataInit handler. thx oleg! (ah, i've not refactored my code yet 'cause i'm extremely in late respectful our roadmap) – Siphonostele

@Elevon When I am in edit mode How can get the value as checked? – Radial

@janina: Sorry, but I don't understand your question. The result of editing will be send to the server in the same way as usually. If multiple options are checked then the values will be sent as comma separated. – Elevon

@Oleg: No, not that.When I am in Add mode I want the multiselect dropdown, But when edit mode I wan regular dropdown not the multiselect one.I mean in edit mode I want to make multiselect false. – Radial

please see this question #21016696 – Radial

@Oleg: kindly tell me how should I try – Radial