jqGrid Select not updating onchange (C# MVC)

Question

I load data via an ajax call in dataInit which works and everything works fine BUT none of my columns (only dropdown columns) don't set the id value.

eg I have itemId and itemCode properties. I load the data and displays correctly but if I change the value in the drop down then it doesn't bind/update my itemId value.

Essentially I want the dropdown to bind to my id column thus when saving it I get an Id to save.

,{
                    key: false,
                    hidden: true,
                    name: 'itemId',
                    index: 'itemId',
                    editable: false
                }, {
                    key: false,
                    name: 'itemCode',
                    index: 'itemId',
                    editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataInit: function(element) {
                            $.ajax({
                                url: '@Url.Action("GetItems", "Maintenance")',
                                dataType: 'json',
                                type: 'POST',
                                success: function(response) {
                                    var array = response;
                                    if (array != null) {
                                        var i;
                                        for (i in array) {
                                            if (array.hasOwnProperty(i)) {
                                                if (itemId == array[i].id) {
                                                    $(element).append("<option value=" +
                                                        array[i].id +
                                                        " selected>" +
                                                        array[i].code +
                                                        "</option>");
                                                } else {
                                                    $(element).append("<option value=" +
                                                        array[i].id +
                                                        ">" +
                                                        array[i].code +
                                                        "</option>");
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        }
                    },
                    editrules: { required: true}

Answer 1

Here is my answer.....Look at the data events. I find the selected row and then I set the cell. The console log was just to test.

{
                    key: false,
                    hidden: true,
                    name: 'userId',
                    index: 'userId',
                    editable: false
                }, {
                    key: false,
                    name: 'userName',
                    index: 'userName',
                    editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataInit: function(element) {
                            $.ajax({
                                url: '@Url.Action("GetUsers", "Maintenance")',
                                dataType: 'json',
                                type: 'POST',
                                success: function(response) {
                                    var array = response;
                                    if (array != null) {
                                        var i;
                                        for (i in array) {
                                            if (array.hasOwnProperty(i)) {
                                                if (userId == array[i].id) {
                                                    $(element).append("<option value=" +
                                                        array[i].id +
                                                        " selected>" +
                                                        array[i].userName +
                                                        "</option>");
                                                } else {
                                                    $(element).append("<option value=" +
                                                        array[i].id +
                                                        ">" +
                                                        array[i].userName +
                                                        "</option>");
                                                }
                                            }
                                        }
                                    }
                                }
                            });
                        },
                        dataEvents: [
                            {  type: 'change',
                                fn: function (e) {
                                    var rowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
                                    $('#jqgrid').jqGrid('setCell', rowId, 'userId', $(e.target).val());
                                    console.log($("#jqgrid").jqGrid('getCell', rowId, 'userId'));
                                }
                            }
                        ]
                    }