Datagrid Editor Tab Issues with onChange event

[rockccf]

Hi,

This is my datagrid.

<th field="vendorVol" width="100" editor="{type:'numberbox',options:{precision:2,validType:'minValue[0]'}}" data-options="formatter:formatDecimal"><a title="Packaging Size of the quoted item" class="easyui-tooltip">Supplier PKG SZ</a></th>
<th field="vendorYield" width="100" editor="{type:'numberbox',options:{precision:2}}" data-options="formatter:formatDecimal"><a title="Yield Size of the quoted item" class="easyui-tooltip">Supplier Yield</a></th>

var edVendorVol = dg.datagrid('getEditor',{index:index,field:'vendorVol'});
var edVendorYield = dg.datagrid('getEditor',{index:index,field:'vendorYield'});
$(edVendorVol.target).numberbox({
  onChange: function(newValue, oldValue) {
  //Always set the maximum value based on newValue that yield can be entered
  $(edVendorYield.target).numberbox({
    validType: ["minValue[0]","maxYieldValue["+newValue+"]"]
  });
}
})

        //Custom Validation Rule
        $.extend($.fn.validatebox.defaults.rules, {
           //Does not allow 0
          minValue: {
              validator: function(value, param){
                  return value > param[0];
              },
              message: 'Please enter a value greater than {0}.'
          },
          //Does not allow yield to exceed packaging size
          maxYieldValue: {
              validator: function(value, param){
                  return value <= param;
              },
              message: 'Yield must not exceed Packaging Size {0}.'
          }
      });

Whenever the value in vendorVol is changed, i will change the maximum value that can be entered at vendorYield input.
However, whenever I edit the row and change the value in vendorVol, and press tab, the tab will lose focus, it won't go to the field "vendorYield".
I've tried removing the part inside onChange block (the part which sets the validType of vendorYield), it works flawlessly (I mean the tab keystroke, it will move and focus in vendorYield)

Any advice?
Thanks.

[stworthy]

You called .numberbox({...}) to re-create the numberbox, so please call .focus() on the inputing box to make it get focus again.

Code:

var edVendorVol = dg.datagrid('getEditor',{index:index,field:'vendorVol'});
var edVendorYield = dg.datagrid('getEditor',{index:index,field:'vendorYield'});
$(edVendorVol.target).numberbox({
	onChange: function(newValue, oldValue) {
	  //Always set the maximum value based on newValue that yield can be entered
	  $(edVendorYield.target).numberbox({
	    validType: ["minValue[0]","maxYieldValue["+newValue+"]"]
	  }).numberbox('textbox').focus();
	}
})

[rockccf]

Hi,

Now the tab works, it will move to next field. However, because I have bind the keydown event to the datagrid as following :

if (e.keyCode == 38) { //key up
               resetIdleSecondsCounter();
               var cell = dgOpts.finder.getTr(dg[0], index-1, 'body', 2).find('td[field="'+field+'"] div.datagrid-cell');
               cell.trigger('click');
               return false;
            }
      
            if (e.keyCode == 40) { //key down
               resetIdleSecondsCounter();
               var cell = dgOpts.finder.getTr(dg[0], index+1, 'body', 2).find('td[field="'+field+'"] div.datagrid-cell');
               cell.trigger('click');
               return false;
            }
   
            if (e.keyCode == 13) { // enter
               resetIdleSecondsCounter();
               var cell = dgOpts.finder.getTr(dg[0], index+1, 'body', 2).find('td[field="'+field+'"] div.datagrid-cell');
               cell.trigger('click');
               return false;
            }

Enter key works fine, it will jump to same field on the next row, the problem is with up arrow and down arrow key, when I pressed either one of them after I changed the value in vendorVol, it will jump to same field on the next row, but the value that i entered in vendorVol in the previous row is gone. The cell is empty.
If you do not change the value in vendorVol and press up/down arrow key, it will be OK, the value will still be there.

onChange: function(newValue, oldValue) {
                        //Always set the maximum value based on newValue that yield can be entered
                        $(edVendorYield.target).numberbox({
                           validType: ["minValue[0]","maxYieldValue["+newValue+"]"]
                        }).numberbox('textbox').focus();
                        console.log("newValue = "+newValue);
                          }

By pressing up/down arrow key, I noticed that the newValue will be printed twice, the first being empty and second shows the new value I entered.
By pressing enter key, newValue will only show once and it's showing the new value I entered correctly.

What might cause this?
Thanks.