jqgrid form editing editoptions select ajax add parameter

Question

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 :(

Eyrie

Answer 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;
    ...

Guru

thx oleg, i should send u a gift for last days answers through stackoverflow ;) anyway, first of all you should use : after data (for users who can take an advantage from this topic). Error changed, it became "invalid json primitive". i solve this [static for this time] way data: "{ 'selectedValue': 'value' }" – Eyrie

@frabiacca: I reread carefully what you wrote about the error. I think that my suggestion should be corrected to use JSON.stringify(). In case if you use type: "POST" inside of ajaxSelectOptions one have to use data: JSON.stringify({ selectedValue: 'value' }). It's not comfortable because you can't use function. If you would use and use UseHttpGet = true option in the webmethod you will be able to use data in the form: data: { selectedValue: function () { return JSON.stringify($("#list").jqGrid('getGridParam', 'selrow')); } – Guru

@Guru Can I directly bind '<select><option>....</option></select>' string to column without any ajax call. – Coelenterate

@ShamseerKSmr: Yes, of cause. You need just use edittype: "select" (see the documentation) – Guru

@Guru But in this case also I have to set key value pair to value attribut right? editoptions: { value: serviceKeyValuePair...... – Coelenterate

@Guru I face some some problem in case of keyvaluepair when data contains ';' (semi colon) - some options will show as undefined. – Coelenterate

@ShamseerKSmr: It's better that you post more detailes. The value like serviceKeyValuePair gives no information. An example of editoptions.value is better. One can specify the value in different formats. One can use separator and delimiter additionally if you use string value of value. The default value of separator is ":" and the default value of delimiter is ";". It could be important to know which evrsion of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). – Guru

@Guru I use jqGrid 4.13.5-pre , serviceKeyValuePair is just a key-value pair default value of separator is ":" and the default value of delimiter is ";", it would be a problem when when 'value` in key-value pair contain characters ":" and ";". – Coelenterate

@ShamseerKSmr: jqGrid supports multiple formats of editoptions.value. It was the reason why I asked you to include an example of data. For example one can use editoptions: { value: {test: "a;:t", value1: "{[;: 7"}}. In other words one can use key-value pairs as object with specified properties. Disadvantage of the format: the order of options can be different in different web bvrowsers. If you prefer string format then you can use separator and delimiter, which I described in my last comment. For eyample, editoptions: { value: "1:2@t1%1;2@t2", delimiter: "%", separator: "@"}. – Guru

@ShamseerKSmr: It's importan to specify the version of jqGrid so that I could reproduce the problem with the version. Every released versions (4.13.4, 4.13.5 and so on) can be easy loaded from CDN or one can load the specific version from GitHub (see releases). jqGrid 4.13.5-pre is just some version between 4.13.4 and 4.13.5. I place the date of the snapshort see the top of the code. Please, upgrade to the last release 4.13.5 or use the latest code. – Guru

@Guru delimiter: "%", separator: "@" won't solve the problem if data contains characters "%" and "@", Instead of key-value pair, Can I bind dropdown datasource with json or <select></select> string – Coelenterate

Let us continue this discussion in chat. – Coelenterate

@ShamseerKSmr: You should use any value as delimiter and separator, which not exist in text/values of the options of the select. – Guru