[Resolved] jQGrid Inline Edit | Dropdown | Combobox| Select Bind Dynamically

Here is I'm going to explain how to bind a drop down by using the value selected by the left column drop down, and its very simple. Here I have case, I do need to bind country, regions by country, city by region in jQGrid inline edit. Refer the below image.

jQGrid Inline Edit

From the above image you can see that, I need to bind the region by country and also load the location by the region, and this needs to happen dynamically by while selecting the country or the region. First we need to create three functions for binding the country, region and location like below.

 
//Load country
function loadCountries() {
   countriesList = ":Select;";
    $.ajax({
        url: '/Place/GetCountries',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        async: false,
        data: '',
        success: function (msg) {
            if (msg != undefined && msg.length > 0) {
                for (var i = 0; i < msg.length; i++) {
                    if (i == msg.length - 1) {
                        countriesList += "" + msg[i].ID + ":" + msg[i].Name + "";
                    }
                    else {
                        countriesList += "" + msg[i].ID + ":" + msg[i].Name + ";";
                    }
                }
            }
        },
        error: function (xhr, textstatus, errorThrown) {
        }
    });
return countriesList;
}

//Load Region
function loadRegions(country) {
   var regionList = "<option value>Select</option>";
    $.ajax({
        url: '/Place/GetRegions',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        async: false,
        data: '{countryID:' + country + '}',
        success: function (msg) {
            if (msg != undefined && msg.length > 0) {
                for (var i = 0; i < msg.length; i++) {
                    regionList += "<option value='" + msg[i].ID + "'>" + msg[i].Name + "</option>";
                }
            }
        },
        error: function (xhr, textstatus, errorThrown) {
        }
    });
return regionList;
}

//Load Location
function loadLocations(region) {
   var locationList = "<option value>Select</option>";
    $.ajax({
        url: '/Place/GetLocations',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        async: false,
        data: '{regionID:' + region + '}',
        success: function (msg) {
            if (msg != undefined && msg.length > 0) {
                for (var i = 0; i < msg.length; i++) {
                    locationList += "<option value='" + msg[i].ID + "'>" + msg[i].Name + "</option>";
                }
            }
        },
        error: function (xhr, textstatus, errorThrown) {
        }
    });
return locationList;
}

and now we need to initialize the things, just check the following code of jQGrid inline edit

 
//Initialize global variables
var currentCountryID;
var currentRegionID;
var currentLocationID;
var countriesList;

//jQuery page loading
$(document).ready(function () {
    loadCountries();
    $("#cmbCompanies").change(function () {
        if ($(this).val() > 0) {
            loadGrid($(this).val());
        }
    });
});

//Grid load function
function loadGrid() {
    $("#empTable").jqGrid({
        url: 'GetEmployees',
        datatype: "json",
        colNames: ['EmpID', 'Country', 'Region', 'Location'],
        colModel: [
            {
                name: 'EmpID', index: 'EmpID', width: 55, sortable: false, editable: true, editoptions: {
                    dataInit: function (element) {
                        $(element).attr("readonly", "readonly");
                        if ($(element).val() == "") {
                            $(element).val(0);
                        }
                    }
                }
            },
            {
                name: 'Loc.Reg.Cntry.ID', index: 'Reg.Cntry.ID', width: 55, sortable: false, editable: true, edittype: "select", editoptions: {
                    value: countriesList,
                    dataInit: function (element) {
                        currentCountryID = element.value;
                        currentRegionID = $(element).parent().next().html();
                        currentLocationID = $(element).parent().next().next().html();
                    },
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                var v = parseInt($(e.target).val(), 10);
                                if (v != undefined && v > 0) {
                                    var row = $(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');

                                    $('select[id*="' + rowId + '_Loc.Reg.ID"]', row).empty();
                                    $('select[id*="' + rowId + '_Loc.Reg.ID"]', row).html(loadRegions(v));
                                }
                                else {
                                    var row = $(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');
                                    $('select[id*="' + rowId + '_Loc.Reg.ID"]', row).empty();
                                    $('select[id*="' + rowId + '_Loc.Reg.ID"]', row).html("<option value>Select<option>");
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).empty();
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).html("<option value>Select<option>");
                                }
                            }
                        }
                    ]
                }, editrules: { required: true, integer: true }, formatter: "select"
            },
            {
                name: 'Loc.Reg.ID', index: 'Reg.ID', width: 55, sortable: false, editable: true, edittype: "select", editoptions: {
                    dataInit: function (element) {
                        $(element).empty();
                        $(element).html(loadRegions(currentCountryID));
                        var rgId = $('option', element).filter(function () { return $(this).html() == currentRegionID; }).val();
                        currentRegionID = rgId;
                        $(element).val(rgId);
                    },
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                var v = parseInt($(e.target).val(), 10);
                                if (v != undefined && v > 0) {
                                    var row = $(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).empty();
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).html(loadLocations(v););
                                }
                                else {
                                    var row = $(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).empty();
                                    $('select[id*="' + rowId + '_Loc.ID"]', row).html("<option value>Select<option>");
                                }
                            }
                        }
                    ]
                }, editrules: { required: true, integer: true }, formatter: "select"
            },
            {
                name: 'Loc.ID', index: 'Loc.ID', width: 55, sortable: false, editable: true, edittype: "select", editoptions: {
                    dataInit: function (element) {
                        $(element).empty();
                        $(element).html(loadLocations(currentRegionID));
                        var locId = $('option', element).filter(function () { return $(this).html() == currentLocationID; }).val();
                        $(element).val(locId);
                    }
                }, editrules: { required: true, integer: true }, formatter: "select"
            }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#empFooter',
        sortname: 'EmpID',
        viewrecords: true,
        sortorder: "desc",
        editurl: "SaveEmploye",
        caption: "Employees",
        ajaxRowOptions: {
            success: function () {
                $("#empTable").trigger("reloadGrid");
            }
        }
    });

    $("#empTable").jqGrid('navGrid', "#empFooter", {
        edit: false, add: false, del: false,
        search: true
    });
    //navButtons

    //Inline edit buttons initialize
    $("#empTable").jqGrid('inlineNav', "#empFooter",
        {  //navbar options
            edit: true,
            add: true,
            del: true
        });
}

and now it will work, and this is not the technique for jQGrid form edit, it is only for the inline edit searching people. If you have any concerns or any questions, just comment here.