jqGrid formatter modifies the original data?

Question

I have a field/column in my jqGrid which is getting its value from a FlexBox (http://www.fairwaytech.com/flexbox) control. I use a form for editing/adding data to the grid locally and then I submit the complete data as a whole to the server. I have implemented the FlexBox control in my form as a custom control, complete with functions for control creation, getting values, etc. (editoptions:{ custom_element:myCustomElem, custom_value:myCustomValue, ...)

So, I have a code/value pair (much like in a normal HTML select), and in the grid I want to show the value, but I want to send the code to the server. When I load the data from the server, I get code/value pairs.

So I tried to write a custom formatter/unformatter, only to find out that the formatter seems to irreversibly modify the original data! So, once I return the value from the formatter (i.e. when displaying the data in the grid cell), the code is lost! And thus, when the unformatter is called (i.e. when sending the data to the server) the code is no longer there!

The grid is set with the following options:

cellsubmit: 'clientArray', datatype: 'clientSide', editurl: '/dummy'

On my navGrid options for add/edit I have a beforeShowForm function which constructs the FlexBox control. The FlexBox control has 2 fields, one normal input and one hidden. The hidden holds the code and the normal holds/shows the value.

The myCustomValue function is like this:

function myCustomValue (elem, action, val) {
      var value = val, code = val;
      if(action == 'get') {
         code = $('input[id="' + $(elem).attr('id') + '_div_hidden"]').val();
         value = $('input[id="' + $(elem).attr('id') + '_div_input"]').val();
      }
      else {
         $('input[id="' + $(elem).attr('id') + '_div_input"]').val(value);
      }
      return (code == value ? value : code + '||' + value);
}

So basically it's getting the code and the value and returning them as a pair separated by '||' (just a custom delimiter).

My custom formatter is like this:

function myFormatter(cellvalue, options, rowdata, action) {
   if(cellvalue == '')
      return cellvalue;
   var codeValuePair = cellvalue.split('||');
   if(codeValuePair && codeValuePair.length > 1)
      // I use a hidden span to store the code because otherwise I lose the code!!!
      // This is where the problem starts! If I just return codeValuePair[1] (description)
      // I lose the code forever!
      return '<span class="md-flexbox-code" style="display:none;">' + codeValuePair[0] + '</span>' + codeValuePair[1];
   else
      return cellvalue;
}

and the unformatter checks to see if the span with the hidden code is there and if it is, it returns that.

Am I missing something? To me the formatter is supposed to be just a way of showing the data, not modifying it!

Answer 1

I am not use FlexBox personally. At the first look to use it in the jqGrid you need just us

editoptions: {
    dataInit : function (elem) {
        $(elem).flexbox(/*flexbox parameters which you need*/);
    }
}

in the corresponding column definition. But probably I miss something.

Which method you use to get local data from the grid? Do you use local data paging? Probably you have close problems as in the question?

The formatter are really only to show the values as a control inside the grid and unformatter is to read the data from the cell. For modifying the data in your case the correct implementation of custom_value important. The value returned by your myCustomValue will be saved in the grid.

It you continue to have the problem you should append your question with more code.