jqgrid dropdown list not loaded after posting to server or page refresh

Question

I am new to using JQGrid and after lot of research I am posting this question.

I am populating a drop down list into jqgrid through dataurl and built the html with buildselect function.

The first time when I try to add a new row it works perfectly fine and the dropdown is created and options are populated.

However after filling the grid row and clicking save, I am posting the data to a MVC action method (PostTestData) and save the posted values in a session variable. When I inspect the posted data I can see that the selected value as a string datatype.

From the PostTestData I am redirecting to another action method GetTestData which will load the saved data back into the grid, this is loading all the text values correctly but the drop down is showing as an empty cell and is not pre-selecting the selected value.

The built select function is not called at this point and is called only after I click the empty cell and a new dropdown is created. I am struggling how to get back the dropdown after post and grid reload.

I am pasting my actual code below

$(function () {

var myGrid = $('#workOrderDetailGrid');
myGrid.jqGrid({
    url: '/CustomerWorkOrders/WorkOrder/GetTestData',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'GET',
    colNames: ['Brand', 'Product Type', 'Received Model', 'Shipped Model', 'Serial number', 'Product Version', 'Quantity', 'Customer Complaint'],
    jsonReader: { repeatitems: false, id: "Product Type" },
    colModel: [
        {
            name: 'BrandList', width: 200, editable: true, edittype: "select", formatter: 'select',
            editoptions:
                {
                    dataUrl: "/CustomerWorkOrders/WorkOrder/GetBrandDropdown",
                    datatype: "json",
                    async: false,
                    buildSelect: function (data) {
                        var response = jQuery.parseJSON(data);

                        var s = '<select>';
                        s += '<option value="0">---Select Brand---</option>';

                        $.each(response, function () {
                            s += '<option value="' + this.Id + '">' + this.Value + '</option>';
                        });

                        return s + "</select>";
                    }
                }
        },
        { name: 'ProductType', key: true, width: 200, editable: true },
        { name: 'ReceivedModel', key: true, width: 75, editable: true },
        { name: 'ShippedModel', key: true, width: 200, editable: true },
        { name: 'Serialnumber', key: true, width: 100, editable: true },
        { name: 'ProductVersion', width: 200, editable: true },
        { name: 'Quantity', key: true, width: 100, editable: true },
        { name: 'CustomerComplaint', key: true, width: 100, editable: true }
    ],
    rowNum: 5,
    loadonce: true,
    pager: '#workOrderDetailPager',
    cellEdit: true,
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    pagerpos: 'center',
    caption: "Workorder subtypes",
    editable: true,
    ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
    ajaxSelectOptions: { cache: false },
    serializeRowData: function (postData) {
        return JSON.stringify(postData);
    },
    editurl: '/CustomerWorkOrders/WorkOrder/PostTestData'
});

myGrid.jqGrid('navGrid', '#workOrderDetailPager',
    {
        edit: false,
        add: false,
        del: false,
        search: false
    });


myGrid.jqGrid('inlineNav', '#workOrderDetailPager',
    {
        edit: true,
        editicon: "ui-icon-pencil",
        add: true,
        addicon: "ui-icon-plus",
        save: true,
        saveicon: "ui-icon-disk",
        cancel: true,
        cancelicon: "ui-icon-cancel",

        editParams: {
            keys: false,
            oneditfunc: null,
            successfunc: function (val) {
                if (val.responseText != "") {
                    alert(val.responseText);
                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                }
            },
            url: '/CustomerWorkOrders/WorkOrder/PostTestData',
            aftersavefunc: null,
            errorfunc: null,
            afterrestorefunc: null,
            restoreAfterError: true,
            mtype: "POST"
        },
        addParams: {
            useDefValues: true,
            addRowParams: {
                keys: true,
                extraparam: {},
                beforeSaveRow: function () { alert(); },
                saveRow: function (response, postdata) {
                    alert();
                },
                successfunc: function (val) {
                    if (val.responseText != "") {
                        alert(val.responseText);
                        $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                    }
                }
            }
        }
    }
);

});

And now the controller action methods for posttestdata and gettestdata

    [HttpPost]
    public ActionResult PostTestData(WorkOrderSubDetailsVm workOrderSub)
    {
        if (Session["WorkOrderSubTypeList"] == null)
        {
            Session["WorkOrderSubTypeList"] = new List<WorkOrderSubDetailsVm>();
        }

        var list = (List<WorkOrderSubDetailsVm>)Session["WorkOrderSubTypeList"];
        list.Add(workOrderSub);

        return RedirectToAction("GetTestData", new { sidx = "", sord = "asc", page = 1, rows = 5 });
    }


      [OutputCache(Duration = 300)]
    public ActionResult GetTestData(string sidx, string sord, int page, int rows)
    {
        List<WorkOrderSubDetailsVm> workOrderSubDetailsList = null;
        if (Session["WorkOrderSubTypeList"] != null)
        {
            workOrderSubDetailsList = (List<WorkOrderSubDetailsVm>)Session["WorkOrderSubTypeList"];
        }

        int pageSize = rows;
        int totalRecords = workOrderSubDetailsList?.Count ?? 4;
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = workOrderSubDetailsList
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

And finally the code for populating the dropdown via dataurl

        public ActionResult GetBrandDropdown()
    {
        var newList = GetBrands();

        return Json(newList, JsonRequestBehavior.AllowGet);
    }

    private List<Brand> GetBrands()
    {
        var newList = new List<Brand>()
        {
            new Brand() {Id = "LG", Value = "LG"},
            new Brand() {Id = "Segway", Value = "Segway"},
            new Brand() {Id = "Lotus", Value = "Lotus"}
        };
        return newList;
    }

Any help will be appreciated as I am literally stuck with. Thanks

Answer 1

I fixed this by removing the formatter: 'select' in the colModel for that particular column and when the grid refreshed it showed the correct value.