dataUrl (editoptions for select) is not working/populating data into Dropdownlist in JQGRID
<p>I’m using JQGRID and code as below</p>

<pre><code>   $("#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 &amp;&amp; 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);
                    }
                }
            }
</code></pre>

<p>Using below reference files..</p>

<pre><code> &lt;script src=”Scripts/jquery-1.11.0.min.js” type=”text/javascript”&gt;&lt;/script&gt;
 &lt;script src=”Scripts/grid.locale-en.js” type=”text/javascript”&gt;&lt;/script&gt;
 &lt;script src=”Scripts/jquery.jqGrid.min.js” type=”text/javascript”&gt;&lt;/script&gt;
 &lt;script src=”Scripts/jquery-ui.min.js” type=”text/javascript”&gt;&lt;/script&gt;
</code></pre>

<p>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.</p>

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

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

<p>checked through F12 (in IE9), could see Response Header as below</p>

<pre><code>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
</code></pre>

<p>Response body returning data.aspx html page and not sure what went wrong.</p>

<p>then, i've added the HTTP handler in web.config file </p>

<pre><code>        &lt;add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/&gt;
</code></pre>

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

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

<hr>

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

<p>I’ve changed my webmethod to return <code>List&lt;Dictionary&lt;string, object&gt;&gt;</code> and the below code</p>

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

<p>Alert is showing as below</p>

<pre><code>  {“d”:[{“ID”:1,”Name”:”Test1″},{“ID”:2,”Name”:”Test2″}]}
</code></pre>

<p>but, buildSelect is not getting hit ,</p>

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

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

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