Search code examples
javascriptjqueryjqgridjqgrid-formatter

jqGrid: format cell value without changing actual (underlying) value?


Is that possible to display something other, yet keeping the original cell value for editing purposes?

one of the columns in my jqGrid is 'enumerated' data. For editing I'm providing edittype: select + editoptions: enum-key:label set, which results in properly displayed select editor. However I'd like to display the label instead of enum-key for regular view, not only editing. I know I could use custom cell formatters but that would cause the actual value to be changed, then I'd have to lookup the keys-labels pairs again before editing the row...


Solution

  • It's hard to say without seeing some code, but you shouldn't need to use a custom formatter, just use formatter: 'select' as shown in the documentation. It specifically states that "the data should contain the keys (“1” or “2”), but the value (“One”, or “Two”) will be displayed in the grid".

    Another option if you need more control over the output is to use the buildSelect option of editoptions. For example, here is a select that I have in code, there are other examples out there too. The idea of course is that you can return any data and then manipulate it as needed to build the select. The data event change function then makes sure that the correct value is set for the input field.

    { name: 'Id', index: 'Id', editable: true, hidden: true,  
         editoptions: { defaultValue: row_id,
                        dataUrl: "DataService.asmx/GetList",
                        buildSelect: function (data) {
                                     var s = '<select>';
                                     if (data && data.d) {
                                        //data is nested, so we need a few steps to get to the actual data
                                        var list = data.d;
                                        var opts = JSON.parse(list);
                                        var subList = opts.List;
                                        //loop through the data to build the options list
                                        for (var i = 0, l = subList.length; i < l; i++) 
                                            {   var ri = subList[i]; 
                                                s += '<option value=' + ri.Id + '>' + ri.Name + '</option>';
                                            }
                                      }
                                      else {
                                         s+= "<option value=0>No data to display</option>";
                                      }
                                      return s + "</select>"; 
                                } ,
                          dataEvents: [
                                  { type: 'change',
                                    fn: function (e) {
                                            $('input#Id').val(this.value);
                                    }
                                  }
                                  ]
    
                         },
           editrules:  {edithidden: true},
           edittype: 'select' 
    

    }