primefacesprimefaces-extensions

PrimeFaces Extension Sheet Restrict Decimal Places For Input


I want to restrict decimal places up to 1. User shouldnt type multiple dots(1..99) and (1.99). I want 1.9 2.6 for ex. Not 2.66 then convert into 2.7 etc. I have to use pe:sheetcolumn. I tried to add p:inputnumber and other p: components than pe extension. But pe:sheetcolumn have to be. With below approach it just let user to type multiple dots and multiple decimal places. It just convert to 1 decimal after user entered value on screen with #0.0. But i want to restrict on input to type multiple decimal places than 1 and multiple dots. I thought about javascript keyup event but i think it would be bad approach. How can i achive that

<pe:sheetcolumn headerText="SOME" value="#{SOME.some}" colWidth="200"
                        colType="numeric" numericPattern="#0.0" >
        </pe:sheetcolumn>

For example for p:inputNumber as you can see on image user cant type multiple dots and they cant add decimal places more than 6.

Example

I want to do same thing with pe:sheetColumn. How can i do that

My JSF VERSION : 2.2.1 PRÄ°MEFACES AND PRIMEFACES EXTENSION VERSION : 6.2


Solution

  • If you install this MonkeyPatch you can then tweak the output to do whatever your want. I am pretty sure you can get the current cell with var currentValue = this.getDataAtCell(row , col) If you add this JS to your app you can then tweak how it handles keypresses and validation.

    I added this line for you

     var currentValue = this.getDataAtCell(row , col); // VALUE HERE!
    

    So you can validate whatever your want with your code and if there is already a "." don't accept another "." etc.

    if (PrimeFaces.widget.ExtSheet) {
        PrimeFaces.widget.ExtSheet.prototype.handleHotBeforeKeyDown = function(e) {
            var selectedLast = this.getSelectedLast();
            if (!selectedLast) {
                return;
            }
            var row = selectedLast[0];
            var col = selectedLast[1];
            var celltype = this.getCellMeta(row, col).type;
            var currentValue = this.getDataAtCell(row , col); // VALUE HERE!
    
            var evt = e || window.event; // IE support
            var key = evt.charCode || evt.keyCode || 0;
            var shiftDown = e.shiftKey;
    
            // #740 tab on last cell should focus this next component
            if (this.allowTabOffSheet && key == 9) {
                var lastRow = this.countRows() - 1;
                var lastCol = this.countCols() - 1;
                if ((!shiftDown && row === lastRow && col === lastCol) ||
                    (shiftDown && row === 0 && col === 0)) {
                    e.stopImmediatePropagation();
                    this.unlisten();
                    this.deselectCell();
    
                    //add all elements we want to include in our selection
                    var focusableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]):not([hidden]):not([aria-hidden="true"]), [tabindex]:not([disabled]):not([tabindex="-1"]):not([aria-hidden="true"])';
                    if (document.activeElement && document.activeElement.form) {
                        var focusable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focusableElements),
                            function(element) {
                                //check for visibility while always include the current activeElement
                                return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
                            });
                        var index = focusable.indexOf(document.activeElement);
                        if (index > -1) {
                            var nextElement = focusable[index + 1] || focusable[0];
                            nextElement.focus();
                        }
                    }
                }
                return;
            }
    
            // prevent Alpha chars in numeric sheet cells
            if (celltype === "numeric") {
                // #766 do not block if just CTRL or SHIFT key
                if (key === 16 || key === 17) {
                    return;
                }
    
                // #739 allow navigation
                var ctrlDown = evt.ctrlKey || evt.metaKey; // Mac support
                if (shiftDown || ctrlDown) {
                    // navigation keys
                    if (key == 9 || (key >= 35 && key <= 40)) {
                        return;
                    }
                }
    
                // check for cut and paste
                var isClipboard = false;
                // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
                if (ctrlDown && evt.altKey) isClipboard = false;
                // Check for ctrl+c, v and x
                else if (ctrlDown && key == 65) isClipboard = true; // a (select all)
                else if (ctrlDown && key == 67) isClipboard = true; // c
                else if (ctrlDown && key == 86) isClipboard = true; // v
                else if (ctrlDown && key == 88) isClipboard = true; // x
    
                // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers
                // ONLY home, end, F5, F12, minus (-), period (.)
                // console.log('Key: ' + key + ' Shift: ' + e.shiftKey + ' Clipboard: ' + isClipboard);
                var isNumeric = ((key == 8) || (key == 9) || (key == 13) ||
                    (key == 46) || (key == 110) || (key == 116) ||
                    (key == 123) || (key == 188) || (key == 189) ||
                    (key == 190) || ((key >= 35) && (key <= 40)) ||
                    ((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105)));
    
                if ((!isNumeric && !isClipboard) || shiftDown) {
                    // prevent alpha characters
                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }
        }
    }