Search code examples
javascriptjqueryjqxgridjqxwidgets

jqxNumberInput forceing user to keep (-) negative sign in front of number value


I have a JQXGrid which utilizes the jqxNumberInput to allow users to enter number and what not.

createeditor: function (row, cellvalue, editor) {
     editor.jqxNumberInput({ spinMode: "simple", decimalSeparator: decimalSeparator, groupSeparator: groupSeparator });
},

declared like so.

My problem is, when the input has a negative number in the fields i.e. "-110.50" the behavior gets tricky. If the user selects the entire input and hits delete the new value is "-0.00". If they then try to type "50.50" into the input the negative removes making the number "-50.50".

You can highlight and delete whatever you want but the only way to get rid of that negative is to put the number to "-0.00" and use the spinner to iterate the value up word, which is terrible for UX.

I did the google search thing and I couldn't find anything in the api or other SO questions related to this problem.

If anyone has hit this problem and has a solution it would be greatly appreciated.


Solution

  • You could just watch for keyup event. If they hit delete set the value to 0 and the minus sign will be removed.

     $("#jqxNumberInput").jqxNumberInput({
    
     }).keyup(function(evn){
         if(evn.keyCode === 46){
             //they hit delete so set the value to 0
             $('#jqxNumberInput').jqxNumberInput('setDecimal', 0);
         }
     });