jqGrid Switch a field to dropdown from text

Question

Ive got a jqGrid where i have a some columns and 1 of the columns is a dropdownlist(select) populated from database.

What i want is : When im not in editmode column with dropdowns just have to show text which have to be taken from query, and when im in edit mode it should show dropdown list.

exactly like here: http://www.trirand.com/blog/jqgrid/jqgrid.html go into row editing/input tipyes

here is the code for my grid:

<script type="text/javascript">
    var lastsel;

    $(document).ready(function () {
        $.getJSON('@Url.Action("ConstructSelect")', function (data) {
            setupGrid(data);
        });
    });
    function setupGrid(data) {
        jQuery(document).ready(function () {
            jQuery("#list").jqGrid({

                url: '@Url.Action("GetStoreList")',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],

                colModel: [
                        { name: 'Id', index: 'Id', width: 50 },
                        { name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],


                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        jQuery('#list').jqGrid('restoreRow', lastsel);
                        jQuery('#list').jqGrid('editRow', id, true);
                        lastsel = id;

                    }
                },
                editurl: '@Url.Action("GridSave")',
                rowNum: 50000,
                rowList: [5, 10, 20, 50],
                pager: '#page',
                sortname: 'Id',
                sortorder: "desc",
                viewrecords: true,
                height: "500px",
                imgpath: '/scripts/themes/base/images'
            });
            jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
        });
    }
</script>

P.S. Ill link code as soon as i am back home

UPDATED: Thanks for an answer, im new to jq, so im making alot of mistakes ofc., but now im back to where i was before, the dropdownlist is not populated with data. i cleaned up the code as u said, so it looks like this now:

btw. The ConstructSelect return a list of Strings

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '@Url.Action("GetStoreList")',
        ajaxSelectOptions: { type: "POST", dataType: "json" },
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
        colModel: [
            { name: 'Kategori', index: 'Kategori', width: 50, key: false},
            { name: 'Navn', index: 'Navn', align: 'center', editable: false },
            { name: 'By', index: 'By', align: 'center', editable: false },
            { name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
                editoptions: { dataUrl: '@Url.Action("ConstructSelect")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data.responseText);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        }],
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("GridSave")',
        rowNum: 50000,
        rowList: [5, 10, 20, 50],
        pager: '#page',
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        height: "900px"
    });
    jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});

Okay, slight modifications was needed to get it working :

var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;

aparently u have to tell buildselect that the data u want to modify is String

But i still have the problem that it doesnt show from begining which sellers is already selected!

Okay after restart it mysticly worked... it is solved now

Answer 1

What you need to do is to use

editoptions: { dataUrl: '@Url.Action("ConstructSelect")' }

instead of

editoptions: { value: data }

Depend on the format of the output of the action ConstructSelect you can need to use an additional property buildSelect of the editoptions. jqGrid expected that the server response on the HTTP 'GET' request of dataUrl will be HTML fragment which represent <select>. For example:

<select>
    <option value="de">Germany</option>
    <option value="us">USA</option>
</select>

If the server return other formatted data, like JSON data

["Germany","USA"]

or

[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]

you can write JavaScript function which convert the server response to the HTML fragment of the <select> and set the value of the property buildSelect to the function.

In the answer you will find an example of the function.

If your action support only HTTP POST and no GET you will have to use ajaxSelectOptions: { type: "POST" } parameter additionally, to overwrite the type of the corresponding ajax requests. In the same way you can overwrite other ajax parameters. For example you can use

ajaxSelectOptions: { type: "POST", dataType: "json"}

(defaults are type : "GET" and dataType: "html")

Some other small remarks to the code:

• you should not place $(document).ready(function () { inside of another $(document).ready(function () {.
• You use 'Id' instead of 'id'. So jqGrid will not find the id property. You can a) rename 'Id' to 'id' b) include additional parameter jsonReader: {id: 'Id'} c) include additional property key: true in the definition of the column 'Id'. Any from the ways will solve the described problem.
• You can remove default properties like edittype: 'text', sortable: true or editable: false. See jqGrid documentation which describes the default values of all colModel properties.
• You should remove imgpath parameter of jqGrid. The parameter is not exist since many many versions of jqGrid (see here).