jqgrid form editing editoptions select ajax add parameter

i’m trying to build a select element in the form editing jqgrid by calling an ajax webmethod (asp.net).

Everythings work great if I call a method without parameter. It doesn’t work if I try to call a webmethod expecting a string parameter:

this is an extract of the code:

ajaxSelectOptions: { type: "POST", contentType: 'application/json; charset=utf-8', },
colNames: ['City', 'State'],
colModel: [
{ 
    name: 'City', 
    index: 'City', 
    align: "center", 
    width: 80, 
    searchoptions: { sopt: ['eq', 'ne', 'cn']} ,
    edittype: 'select',
    editable: true, 
    editrules: { required: true },
    editoptions: { 
        dataUrl: '<%# ResolveUrl("~/Service/Domain/ServiceGeographic.asmx/GetCityByState") %>',
        buildSelect: function (data) {
        var retValue = $.parseJSON(data);
        var response = $.parseJSON(retValue.d);

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

        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>";
        }                        
    }
},
...

where can i set the parameter to send to the GetCityByState webmethod?

EDIT: I did not highlight that I’m using POST to call webmethod. Even if i tried as Oleg suggested on this link, it doesn’t work 🙁

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I think you need ajaxSelectOptions parameter of jqGrid. For example if you need to have the id of the selected row as an additional id parameter sent to webmethod identified by dataUrl you can use data parameter of ajaxSelectOptions in function form:

ajaxSelectOptions: {
    type: "GET", // one need allows GET in the webmethod (UseHttpGet = true)
    contentType: 'application/json; charset=utf-8',
    dataType: "json",
    cache: false,
    data: {
        id: function () {
            return JSON.stringify($("#list").jqGrid('getGridParam', 'selrow'));
        }
    }
}

because in the code above the parameter dataType: "json" are used you should modify the first line of buildSelect from

buildSelect: function (data) {
    var retValue = $.parseJSON(data);
    var response = $.parseJSON(retValue.d);
    ...

to

buildSelect: function (data) {
    var response = $.parseJSON(data.d);
    ...

Moreover because you use the line $.parseJSON(data.d) I can suppose that you return the data from the webmethod in the wrong way. Typically the type of return value from the webmethod should be class. You should don’t include any call of manual serialization of the returned object. Instead of that some people misunderstand that and declare string as the return type of the webmethod. They makes JSON serialization manually with call of DataContractJsonSerializer or JavaScriptSerializer. As the result the manual serialized data returned as string will be one more time serialized. It’s the reason why you can have two calls of $.parseJSON: var retValue = $.parseJSON(data); var response = $.parseJSON(retValue.d);. If you will be use dataType: "json" inside of ajaxSelectOptions and if you would do no manual serialization to JSON in web method and just rejurn the object like it be, you would need to have no call of $.parseJSON at all. You can just use directly data.d:

buildSelect: function (data) {
    var response = data.d;
    ...

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0