Jqgrid edittype : select editoptions: dataUrl is not called to populate the data

Question

I am trying to populate one of the columns using select box in jqgrid. Below is the code.

$(document).ready(function(){
    
    $("#grid").jqGrid({
        url: "./info",
        datatype: "json",
        mtype: "GET",
        ajaxSelectOptions:{
            type: "GET",
            dataType: "json",
            success: function (result) {
                console.log(result);
            }
        },
        colNames: ["DeptId", "DeptName", "StuId", "StuName", "StuDoj"],
        colModel: [
            { name: "deptId", hidden:true },
            { name:"deptName", width:90, editable:true, edittype:'select', formatter:'select', editoptions:{
                dataUrl:'./getDepts',
                buildSelect: function(res){
                    console.log(res);
                    var s='<select id="dept" name="dept">'
                    $.each(res,function(idx,obj){
                        $('#dept')
                          .append($('<option>', { value : obj.deptId })
                          .text(obj.deptName));
                    }); 
                    return s+"</select>";
                }
            }},
            { name: "studentId", hidden:true },
            { name: "studentName", width: 80,editable:true },
            { name: "studentDoj",width: 90,editable:true }
        ],
        pager: "#pager",
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: "empId",
        sortorder: "asc",
        sortable:true,
        viewrecords: true,
        gridview: true,
        caption: "MyGrid",
        jsonReader: {
            repeatitems: false,
            id: "empId",
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        }
    }); 
    $("#grid").jqGrid('navGrid','#pager',{add:false,view:true,search:true});

})

In the editOptions for colModel 'deptName' the dataUrl is not called to populate the select box. The jqgrid is populated using /info resturl which fetches the deptName for a particular student. I want the deptName to be of type select box and its value should be same as deptName fetched using info rest url

Answer 1

It should be called, but your data will be newer filled, since you overwrite the success function in ajaxSelectOptions.

In order to get response, please comment the success function or remove it

$("#grid").jqGrid({
    url: "./info",
    datatype: "json",
    mtype: "GET",
    ajaxSelectOptions:{
        type: "GET",
        dataType: "json"
    },
    ....
});

UPDATE: With small changes your code is working fine. Here is a link to your code

Note that the formatter does not have option dataUrl. It is only available in in editing.