jqgrid edittype select load value from data

Question

I am using jqgrid in my new project. In a specific case I need to use a select element in the grid. No problem.

I define the colModel and the column for example like (from wiki)

colModel : [
  ...
{name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} },
  ...
]

But now when I load my data I would prefer the column "myname" to contain the value 1. This won't work for me instead it has to contain the value "One".

The problem with this is that the text-part of the select element is in my case localized in the business layer where the colModel is dynamically generated. Also the datatype for the entity which generates the data via EF 4 may not be a string. Then I have to find the correct localized text and manipulate the data result so that the column "myname" does not containt an integer which is typically the case but a string instead with the localized text.

There is no option you can use so that when the data contains the value which match an option in the select list then the grid finds that option and presents the text. Now the grid presents the value as a text and first when I click edit it finds the matching option and presents the text. When I undo the edit it returns to present the value again.

I started to think of a solution and this is what I came up with. Please if you know a better solution or if you know there is a built in option don't hesitate to answer. Otherwise here is what I did:

loadComplete: function (data) {
                    var colModel = grid.getGridParam('colModel');
                    $.each(colModel, function (index, col) {
                        if (col.edittype === 'select') {
                            $.each(grid.getDataIDs(), function (index, id) {
                                var row = grid.getRowData(id);
                                var value = row[col.name];
                                var editoptions = col.editoptions.value;
                                var startText = editoptions.indexOf(value + ':') + (value + ':').length;
                                var endText = editoptions.indexOf(';', startText);
                                if (endText === -1) { endText = editoptions.length; }
                                var text = editoptions.substring(startText, endText);
                                row[col.name] = text;
                                grid.setRowData(id, row);
                            });
                        }
                    });
                }

It works and I will leave it like this if nobody comes up with a better way.

Answer 1

You should just include additional formatter:'select' option in the definition of the column. See the documentation for more details.