dataUrl (editoptions for select) is not working/populating data into Dropdownlist in JQGRID

Question

I’m using JQGRID and code as below

   $("#jqGridDel").jqGrid({
            url: "Data.aspx/BindInfo",
            datatype: 'json',
            mtype: 'POST',
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            ajaxSelectOptions: { type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    alert("hello");
                }
            },,
            colName: ['DelId', 'Name', 'DeliveryName', 'Status'],
            colModel: [
                {
                    label: 'Del No',
                    name: 'DelId',
                    width: 35
                },
                {
                    label: 'Gate',
                    name: 'Name',
                    width: 200,
                    editable: true,
                    edittype: "select", 
                    foramtter: "Select",
                    editoptions: {
                        dataUrl: "Data.aspx/BindDDInfo",
                        buildSelect: function (data)
                        {
                            alert(data);
                        }
                    }
                },
                {
                    label: 'Delivery',
                    name: 'DeliveryName',
                    width: 150,
                    editable: true
                },
                {
                    label: 'Active',
                    name: 'Status',
                    width: 40,
                    editable: true,
                    align: "center",
                    formatter: "checkbox",
                    edittype: "checkbox",
                    editoptions: { value: '1:0' }
                }
            ],
            loadonce: true,
            width: 1050,
            height: "100%",
            pager: "#jqGridDelPager",
            caption: "Configuration",
            rowNum: 15,
                            jsonReader: {
                                page: function (obj) { return 1; },
                                total: function (obj) { return 1; },
                                records: function (obj) { return obj.d.length; },
                                root: function (obj) { return obj.d; },
                                repeatitems: false,
                                id: "QGDelId"
                            },
            onSelectRow: function (id) {
                if (id && id !== lastSelQGDel) {
                    lastSelQGDel = id;
                }

            },
          ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
            serializeRowData: function (postData) {
                return JSON.stringify({ editQGData: postData });
            },
            editurl: "Data.aspx/SaveData"
        });

        $('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false });
        $('#jqGridDel').inlineNav('#jqGridDelPager',
        // the buttons to appear on the toolbar of the grid
            {
            edit: true,
            add: true,
            del: true,
            refresh: true,
            cancel: true,
            editParams: {
                keys: true,
                rowid: lastSelQGDel,
                restoreAfterError: true,
                reloadAfterSubmit: true,
                successfunc: function (result) {
                    if (result.responseJSON.d == "Success")
                        alert("Data saved successfully!!");
                    else
                        alert("There is some error in data processing");
                    setTimeout(function () {
                        $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                    }, 50);
                }
            },
            addParams: {
                keys: true,
                addRowParams: {
                    successfunc: function (result) {
                        if (result.responseJSON.d == "Success")
                            alert("Data saved successfully!!");
                        else
                            alert("There is some error in data processing");
                        setTimeout(function () {
                            $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                        }, 50);
                    }
                }
            }

Using below reference files..

 <script src=”Scripts/jquery-1.11.0.min.js” type=”text/javascript”></script>
 <script src=”Scripts/grid.locale-en.js” type=”text/javascript”></script>
 <script src=”Scripts/jquery.jqGrid.min.js” type=”text/javascript”></script>
 <script src=”Scripts/jquery-ui.min.js” type=”text/javascript”></script>

I’m able to load the data and save the same from JQGRID to SQL Database and vice versa. but, select option (column: Gate) is not loading any data.. i tried to debug the code and understood that the dataUrl is not firing during editing row via inline-nav.

the code behind function BindDDInfo (return type as 'string' and mentioned Webmethod and static) returns string in <Select> <Option>……</Option> </Select> format.

<select>
<option value='1'>Text1</option>
<option value='2'>Test2</option>
<option value='3'>Test3</option>
<option value='4'>TEst5</option>
<option value='5'>TEst6</option>
<option value='6'>Test7</option> 
<option value='7'>Test8</option>
<option value='8'>Test9</option>
</select>

checked through F12 (in IE9), could see Response Header as below

Response         HTTP/1.1 200 OK
Server           ASP.NET Development Server/10.0.0.0
Date             Wed, 24 Feb 2016 15:07:16 GMT
X-AspNet-Version 4.0.30319
Cache-Control    no-cache, no-store
Pragma           no-cache
Expires          -1
Content-Type     text/html; charset=utf-8
Content-Length   69186
Connection       Close

Response body returning data.aspx html page and not sure what went wrong.

then, i've added the HTTP handler in web.config file

        <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

Now, dataUrl is hitting webmethod BindDdInfo and alert ("hello") popped up (which is from ajaxSelectOptions) but it's not going to buildSelect in editoptions.

The below is returned as responsebody {"d":"\u003cselect\u003e\u003coption value=\u00271\u0027\u003eTest1\u003c/option\u003e\u003c/select\u003e"}

---

After the suggestion to get JSOn data from BindDDInfo, I've modified code as below,

I’ve changed my webmethod to return List<Dictionary<string, object>> and the below code

ajaxSelectOptions: { type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
datatype: ‘json’,
success: function (result) {
alert(JSON.stringify(result));
}
}

Alert is showing as below

  {“d”:[{“ID”:1,”Name”:”Test1″},{“ID”:2,”Name”:”Test2″}]}

but, buildSelect is not getting hit ,

 dataUrl: “Data.aspx/BindDDInfo”,
 buildSelect: function (response) {
 var data = typeof response === “string” ? JSON.stringify(response) :      response,
 s = “<select>”;
 s += ‘<option value=”0″>–Select–</option>’;
 $.each(data, function () {
 s += ‘<option value=”‘ + this.ID + ‘”>’ + this.Name + ‘</option>’;
 });
 return s + “</select>”;
 }

tried the console.log(response) and alert(response) in buildSelect but it doesn’t give any popup.

Can any one help me out to get the data into dropdownlist in JQGRID from Database.

Answer 1

You main problem seams that "the dataUrl is not firing during editing row via inlineNav". I see many small things in the code which could be improved. I suppose the main problem is the typing error in the column Name (Gate column). You should use

formatter: "select"

instead of

foramtter: "Select"

(two errors: formatter should be used instead of foramtter and "select" instead of "Select").

Additionally I would recommend you some other small tips:

• remove <div id="jqGridDelPager"></div> from HTML markup of your page and use pager: true instead of pager: "#jqGridDelPager". You can skip "#jqGridDelPager" parameter of navGrid and inlineNav. Free jqGrid aftomatically created the div for the pager and navGrid and inlineNav will uses the pager.
• you use label property in all columns and another textes for colName. The correct name of the the option is colNames and not colName. You can either move the texts from label to colNames array or to remove unneeded colName array.
• inlineNav method of free jqGrid automatically creates navigator bar it it's not exist. Thus you can remove unneeded call of navGrid.
• You don't need to use ajaxSelectOptions: { cache: false, type: 'POST' }. You can use ajaxSelectOptions: { type: 'POST' } instead.
• You can use singleSelectClickMode: "selectonly" if you want that the second click on the row not unselect it
• You can use forceClientSorting: true option to force sorting of data returned from the server on the client size. You need just add for example sortname: "Name" option which inform jqGrid by which column the data should be sorted.
• The value of jsonReader can be reduced to jsonReader: {root: "d", repeatitems: false, id: "QGDelId"}. It's important that the setting id: "QGDelId" means that every item of the data contains QGDelId property with unique value which should be used as the rowid.
• I don't understand the meaning of onSelectRow which you use and the goal of lastSelQGDel variable. I suggest you to remove the collback.
• free jqGrid provides more comfortable way for specifying the options of underlying methods. inlineEditing option of jqGrid for example allows to specify common options used by inline editing methods. You correct code, for example, specify the same options in addParams.addRowParams and in editParams (see the options of inlineNav). By the way, the position of key: true inside of addParams instead of addParams.addRowParams is wrong. It's much better to specify the common options inside of inlineEditing option of jqGrid. See the wiki article for more information.
• I recommend you to use

$("#jqGridDel").trigger('reloadGrid', [{fromServer: true}]);

instead of

$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');