jeasyui apply CSS style in edit mode

Question

The example given by jeasyui webpage always show styler during retrieval of datagrid records. Meaning that the jEasyUi apply the style when the datagrid is loaded. For example: http://jeasyui.com/demo/main/index.php?plugin=DataGrid in DataGrid Cell Style link.
How to apply the style during editing mode?

<th data-options="field:'qty',width:100, 
   styler:cellStyler, 
   editor: { type:'numberbox', 
   options: 
      { required:'true', precision:2, onChange:onChangeQty }
   }">
Qty</th>

The cellStyler took effect only during the datagrid loaded,

function cellStyler(value,row,index){
    alert(value);
    if (value < 30){
        return 'background-color:#ffee00;color:red;';
    }
}

so I add in the onChange to do the validation

function onChangeQty(newValue, oldValue) 
{
    var qohField = $("#dg-form").datagrid("getEditor", {index:editIndex,field:"qoh"});
    if (eval($(qohField.target).numberbox('getValue')) < eval(newValue)) {
        console.log($(qohField.target).numberbox('getValue'));
    }
}

but then, how can the onChange change the style color of the cell background?

Answer 1

you can try to add this code to your onChangeQty function

.....
var dg = $('#dg-form');
var col = dg.datagrid('getColumnOption','qty');
.....

.....
col.styler = function(){
  return 'background-color:#ffee00;color:red;';
};

dg.datagrid('refreshRow',editIndex);

this is not tested,for your more information I found the solution for the others here