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

Oleg · Accepted Answer · 2016-12-14T08:52:44.717

2

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

edited Dec 14 '16 at 08:52

answered Feb 11 '12 at 13:15

Oleg

220,925
34
403
798

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' }" – frabiacca Feb 11 '12 at 13:56
1

@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')); }` – Oleg Feb 11 '12 at 14:13
@Oleg Can I directly bind '' string to column without any ajax call. – Shamseer K Dec 14 '16 at 04:11
@ShamseerKSmr: Yes, of cause. You need just use `edittype: "select"` (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype)) – Oleg Dec 14 '16 at 05:54
@Oleg But in this case also I have to set key value pair to value attribut right? `editoptions: { value: serviceKeyValuePair......` – Shamseer K Dec 14 '16 at 06:07
@Oleg I face some some problem in case of keyvaluepair when data contains ';' (semi colon) - some options will show as undefined. – Shamseer K Dec 14 '16 at 06:11
@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](https://github.com/free-jqgrid/jqGrid), commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). – Oleg Dec 14 '16 at 06:29
@Oleg 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 `";"`. – Shamseer K Dec 14 '16 at 06:45
@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: "@"}`. – Oleg Dec 14 '16 at 07:49
@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](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs) or one can load *the specific* version from GitHub (see [releases](https://github.com/free-jqgrid/jqGrid/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. – Oleg Dec 14 '16 at 07:58
@Oleg `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 `` string – Shamseer K Dec 14 '16 at 08:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130582/discussion-between-shamseer-k-smr-and-oleg). – Shamseer K Dec 14 '16 at 08:11
@ShamseerKSmr: You should use **any** value as `delimiter` and `separator`, which not exist in text/values of the options of the select. – Oleg Dec 14 '16 at 08:12

jqgrid form editing editoptions select ajax add parameter

1 Answers1

Linked