Select current value instead of text in a grid with inline editing

Question

By default jqGrid considers the text value to set the selected option in a combo box. How can I add a column for the key value and have jqGrid selecting the right option using the key value?

I've been using the custom formatter, but some pages are displaying undefined when the rows are not editable, and when the inline edit modes is enabled, they display the right option.

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#Grid').jqGrid({
                autowidth: true,
                datatype: 'json',
                height: '100%',
                pager: '#pager',
                rowNum: 10,
                sortname: 'Description',
                url: '/AppUrl/Service',
                viewrecords: true,
                gridComplete: function () { OnGridComplete() },
                onSelectRow: function (rowid, status) { grid.EditGridRow(rowid) },
                colModel: [
                {
                    name: 'ID',
                    hidden: true,
                    key: true,
                    index: 'ID'
                }, {
                    name: 'ModuleId',
                    formatter: formatAsDropDown,
                    label: 'Módulo',
                    sortable: true,
                    width: 300,
                    editable: true,
                    edittype: 'select',
                    editoptions: { "value": "1:Modulo 1;2:Modulo 2;3:Modulo 3" },
                    index: 'ModuleId'
                }, {
                    name: 'Description',
                    label: 'Description',
                    sortable: true,
                    width: 300,
                    editable: true,
                    index: 'Description'
                }
                ]
            });

            function formatAsDropDown(cellvalue, options, rowObject) {
                return rowObject.ModuleName;
            }
        });
    </script>