jqGrid allows only numbers when editing cell

Question

I want to prevent my user from typing letters inside a numeric field. I saw that there is an option of: editrules:{number:true}, but this option will let the user click any key the user wants and only when row saved it will alert for illegal input. This is not good option for me. I want to prevent from the start the typing of keys that are not numbers (for example in a regular input I can use jQuery's .numeric()).

How can this be done?

Solution 1

I don't use jQuery.numeric plugin myself, but I suppose you should use dataInit property of editoptions for the corresponding grid column:

editoptions: { dataInit: function (elem) { 
                   $(elem).numeric(/*some optional parameters*/); 
               }
}

or in case of some trouble in the form

editoptions: { dataInit: function (elem) {
                   setTimeout(function(){
                       $(elem).numeric();
                   }, 100);
               }
}

I hope it will work.

Solution 2

      {name:'actualNo',index:'actualNo',editable:true, edittype:"text", width:150,editoptions:{
                                size: 15, maxlengh: 10,
                                dataInit: function(element) {
                                    $(element).keyup(function(){
                                        var val1 = element.value;
                                        var num = new Number(val1);
                                        if(isNaN(num))
                                        {alert("Please enter a valid number");}
                                    })
                                }
                            }},

Solution 3

{name:'rate',index:'rate', align:"left", width:'150',editable:true,

            edittype:"text", editoptions:{
                size: 25, maxlengh: 30,
                dataInit: function(element) {
                    $(element).keypress(function(e){
                         if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                            return false;
                         }
                    });
                }
            }
        },

Comments

[Aylen]

Great answer! If you want to allow only integers you can use $(elem).numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); });. See here.

[Oleg]

@Filly: Thanks for the advice! It could be interesting for other readers.

[rpaillao]

Thanks, more simple i'ts always the best way.