Both Image and Select Formatter in jqgrid column

Question

I'm using jqgrid(Form editing) with dynamic colmodel in which i have to show a image inside a cell if necessary based on some values for which the same cell has the edit type as select.

So, the image should be shown in the grid when in view and during edit the cell should be turned as select. Not sure how to use the formatter.

//Code:

  case 'dropdown':    
                  colname.push({   
                            name: this.Name, index: this.Name, width: 130, edittype: "select", formatter: 'select', editoptions: { value: ':Select;' + this.ValueList.slice(0, -1) }, stype: 'select', searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true });

                        break;

The above code is used for creating the cell as select format during edit. Now i have to add a image inside the same cell.

Have to add the image formatter something like this?. Not sure where.

//Code:

formatter: function () {
                return "<img src='http://myserver/path/i.jpg' alt='my image' />";
            }

I have tried like adding the formatter as it is in the above mentioned code but its showing only the image and not the actual text of the column and in the edit i couldn't load the desired selected text.

How can i achieve this?

Answer 1

I would recommend you to use select2 plugin which allows creating very comfortable selects with images (see here) and searching inside of select options. The answer (see the demo) and the another one demonstrates how to use select2 inside of form editing, searching dialog and the filter toolbar.