Using editorKeyPress or editorKeyDown to restrict length of editor entry

[mshapiro]

I have a custom validator on an integer cell that only allows entry of a value in the range 1-5 or to delete an existing value.  Since the validator doesn't fire until the user tries to leave the cell, it's possible to enter "12345" before getting my out of range error.  Could editorKeyPress or editorKeyDown be used to not allow entry of a second character at all?  It wasn't obvious to me how use the events get either the existing length or the characters that have already already been entered.  Thanks.

[paramvir]

You can limit the number of characters in the text box with maxlength attribute by adding below editor property to required column.

Code: [Select]

editor: {
    attr: "maxlength=1"
}

If you further want to limit the input digits to [1-5] only, then use editorBegin and editorEnd events to change the editModel.reInt regular expression for that column.

Code: [Select]

               editorBegin: function (evt, ui) {
                   if (ui.dataIndx === 'dataIndx of required column') {

                       var EM = $(this).pqGrid('option', 'editModel');
                       reInt = EM.reInt;
                       EM.reInt = /^[1-5]*$/;
                   }
               },
               editorEnd: function (evt, ui) {
                   if (ui.dataIndx === 'dataIndx of required column') {

                       var EM = $(this).pqGrid('option', 'editModel');
                       EM.reInt = reInt;
                   }
               }

Example jsfiddle (check Rank column )

http://jsfiddle.net/h84L1Lbp/

[mshapiro]

This is what I needed.  Thanks.  As a follow up, my intent is to update certain calculated values in cells on the same row and then in certain columns in all rows.  I would like to do this as soon as the 1-5 value is entered.  I would use updateRow to change the cell values and then use refreshColumn to refresh the columns that have changed.  Is there any reason not to do this in the editorEnd event, or would another event be a better choice?  There will typically be 100 or fewer rows in the grid, cells in 2 columns would be updated in all rows.  Thanks.

[paramvir]

1) My previous suggested solution for limiting digits to 1-5 with editorBegin and editorEnd can be bypassed by user when he presses any other numeric key for a longer duration.

So the following solution could be used based on editorKeyPress

Code: [Select]

               editorKeyPress: function (evt, ui) {
                   if (ui.dataIndx === 'dataIndx of required column') {
                       //debugger;   
                       var charsPermit = "12345",
                           charC = (evt.charCode || evt.keyCode),
                           chr = String.fromCharCode(charC);
                       console.log("keypress" , chr);
                       if (chr && charsPermit.indexOf(chr) == -1) {
                           return false;
                       }
                   }
               },

2) editorEnd event doesn't necessarily mean the user made any changes in the cell, he may tab to another cell or escape out of the editor without making any changes. cellSave event is fired when the user makes changes in the cell.