jqgrid retrieve data of cell and manipulate it

Question

I want to retrieve from a dataEvents event the value the user entered. I want to only allow the numbers 0-24 and if the user inserts a number like 4,5 (german writing) I want to replace the "," with a ".". Thus convert "4,5" to "4.5".

But I'm struggling with getting the data the user entered. The method I'm using always returns blank.

colModel:[
    {name:'sum',index:'sum', width:45, editable: true, sortable:false,
     editoptions: { dataEvents: [ 
                        {
                            type: 'keypress', // keydown
                            fn: function(e) {
                                // console.log('keypress');
                                var v=$(e.target).text();
                                alert(v); // v is empty.
                                //reset the target value, actually I want to replace
                                // enter code here a comma with a point
                                // only allow the numbers 0 - 24
                            }
                        }
                    ] 
                  }
    },
],

Oleg · Accepted Answer · 2010-12-15T20:56:39.403

7

You can do replacement of ',' to '.' better inside of 'keyup' event handler with the following

$(this).val($(this).val().replace(/,/,'.'));

So you can use following dataEvents

dataEvents: [
    {
        type: 'keyup',
        fn: function(e) {
            var oldVal = $(this).val();
            var newVal = oldVal.replace(/,/,'.');
            if (oldVal !== newVal) {
                $(this).val(newVal);
            }
        }
    },
    {
        type: 'keypress',
        fn: function(e) {
            var key = e.charCode || e.keyCode; // to support all browsers
            if((key < 48 || key > 57) &&   // if non digit
               key !== 46 && key !== 44 && key !== 8 && // and not . or , or backspace
               key !== 37 && key !== 39) { // arrow left and arrow right
                return false;
            }
        }
    }
]

On the following demo you can see the results live. The only disadvantage which I see in the example is following: if you will try to type comma in the middle of the text, the cursor position (caret) will be changed to the end of the input after the replacement comma to point. Probably it is not a real problem in your case. It you do want to save the cursor position you should probably do this document.selection using for IE or .selectionStart and .selectionEnd for Firefox.

UPDATED: I fixed the problem with the usage of e.keyCode inside of keypress event in the Firefox. I follows the information from here and use now e.charCode || e.keyCode instead of e.keyCode. The above code and the demo are fixed now.

edited Dec 15 '10 at 20:56

answered Dec 10 '10 at 10:37

Oleg

220,925
34
403
798

Oleg, this is awesome! I will try it in a moment, but the live demo (wow getting a live demo) is already exactly what I was looking for! – Thomas Kremmel Dec 10 '10 at 11:45
Thank you Oleg. It works perfectly fine! You saved my weekend ;-) – Thomas Kremmel Dec 10 '10 at 12:20
@Oleg: I just recognized that the user is not able to insert a number in the cell if using firefox, whereas in chrome it works. Do you have an idea how to circumvent this problem!? – Thomas Kremmel Dec 14 '10 at 13:51
@Tom Tom: I will try to look at the problem tomorrow. – Oleg Dec 14 '10 at 13:53
@Tom Tom: I found the reason of the problem in Firefox which you described and fixed the code. Best regards. – Oleg Dec 15 '10 at 08:10
@Oleg: wow.. cross-browser programming is still hard work. funny enough, in firefox I can now not press the backspace button.. whereas it works in IE and chrome. – Thomas Kremmel Dec 15 '10 at 20:32
@Tom Tom: I updated the code one more time. I included `&& key !== 8` in the `if`. – Oleg Dec 15 '10 at 20:50
@Tom Tom: I added also code for arrow left and arrow right. You can easy modify the code to allow more keys. – Oleg Dec 15 '10 at 20:57

jqgrid retrieve data of cell and manipulate it

1 Answers1

Linked