Log in to post a reply

How to allow only positive number input in flexgrid wijmo

Posted by: viethdhe130200 on 7 February 2022, 8:49 pm EST

  • viethdhe130200

    Posted 7 February 2022, 8:49 pm EST

    In the price column in the link below, you are entering the amount. My problem is that I only want to enter numbers, not letters (preventing when the user input something other than positive number). Hope anyone can help me in this case. Thank you very much

    This is link: https://jscodemine.grapecity.com/share/ioMnlbLb2kqQjNzMnDWWsg/

  • viethdhe130200

    Replied 7 February 2022, 9:31 pm EST

    viethdhe130200 said:
    In the price column in the link below, you are entering the amount. My problem is that I only want to enter numbers, not letters (preventing when the user input something other than positive number). Hope anyone can help me in this case. Thank you very much

    This is link: https://jscodemine.grapecity.com/share/ioMnlbLb2kqQjNzMnDWWsg/

    And User only input 2 decimals after the dot . sign
    Example: 2.34 or 12.23 ( not input 12.233). It's mean I want prevent from the moment the user enters. Thank you very much

  • sonu.pandey

    Replied 9 February 2022, 4:26 am EST

    Hello,

    You can use the InputNumber as an editor for the desired column and provide the settings as per your requirement like you can set the min property of the InputNumber to 0, to restrict users from entering negative numbers. And set the format property to "n2" to restrict input up to 2 decimal places.

    Please refer to the sample link below demonstrating the same:
    https://stackblitz.com/edit/js-jz6bxl?file=index.js

    Regards

  • viethdhe130200

    Replied 9 February 2022, 2:07 pm EST

    Thanks for your answer. But I will have a problem, if I use InputNumber, then after editing I won't be able to switch to other cells using the UP, DOWN, LEFT, RIGHT arrow keys on the keyboard. Can you suggest me in this case. Thank you very much.

  • sonu.pandey

    Replied 10 February 2022, 12:53 am EST

    Hello,

    When a cell is in edit mode pressing the arrow keys would not move the selection to other cells whether they use the InputNumber as an editor or not, the behavior is by design. However, if you wish to move to other cells when pressing the arrow keys during edit mode of a cell then you may handle the keydown event on the FlexGrid's hostElement and handle the keys manually. Please refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/js-ywhacm?file=index.js

    Regards

  • viethdhe130200

    Replied 10 February 2022, 5:18 pm EST

    - In the link that I sent you in the first question (https://jscodemine.grapecity.com/share/ioMnlbLb2kqQjNzMnDWWsg/), in the PRICE column there will be 2 edit cases:
    + Case 1: When I click once in the edit cell (not double-click) or use UP, DOWN, LEFT, RIGHT arrow keys on the keyboard to move to that edit cell, then after input the value done, you can use UP, DOWN, LEFT, RIGHT arrow keys on the keyboard can move to other cells
    + Case 2: When I click twice mouse (click the mouse for the first time, then wait 5 seconds, then click the second time) or double click or press the SPACE key on the keyboard, after input the value, you can use UP, DOWN, LEFT, RIGHT arrow keys on the keyboard can move in that cell ( don't let move to other cells )

    - Your answer is very good but will not be able to cover the 2nd case above. My problem is that I can't cover the 2nd case above when I use inputNumber. So, hope you can help me to cover both cases using inputNumber or some other way. Thank you very much <3 :).

  • dushyant.sharma

    Replied 16 February 2022, 11:00 pm EST

    Hello,

    We apologize for the delay in response, to implement the above requirement, we will be handling the default input editor instead of the custom editor (inputNumber) as below:

    * To allow the user to enter only numeric values and set the minimum value as 0, we will set the "type" attribute as number and "min" attribute to 0 for the default editor.
    * To prevent the user from entering more than two decimal places, we would place an input event listener to the editor and would check for the required decimal places accordingly.

    Please refer to the sample below.
    https://stackblitz.com/edit/js-a3ohd7?file=index.js

    Regards
    Dushyant Sharma

  • viethdhe130200

    Replied 20 February 2022, 12:48 pm EST

    I apologize for the delay in response to your answer. That is a great answer. I will try using it. Thank you very much <3

  • viethdhe130200

    Replied 20 February 2022, 3:27 pm EST

    In the time of waiting for your answer, I used my method that is still using inputNumber and I will have to customize it to know when the user clicks or double clicks to be able to move with arrow keys with 2 cases I mentioned in the question above.

    Well, after testing your method, I found it less risky of bugs that may come later than my way because I have to customize a lot. Generally, your way is safer than mine.

    But if I use your method, how will I solve the case when I input it in the Date column because I tried editor.setAttribute('type', 'date') but it is not what I expected (I expect the input date column will be the same as the date column in the following link: https://jscodemine.grapecity.com/share/ioMnlbLb2kqQjNzMnDWWsg/) and it can be moved by the 2 cases I mentioned in the question above.

    These are the requirements we have to deal with in our product when I use flexgrid wijmo. I look forward to hearing from you as soon as possible to resolve this problem. Thank you very much <3

  • sharad.tomer

    Replied 21 February 2022, 4:19 pm EST

    Thank you for the detailed explanation. I understand the issue, the problem with using custom editors is that it does not support quick edit mode(where you start typing and the cell goes in edit mode, using arrow keys ends edit).
    To support quick edit mode for custom editors you may handle the prepareCellForEdit event and update the _fullEdit flag of EditHandler as required. Please refer to the following code snippet and the sample demonstrating the same:
    function enableQuickEditSupportForEditor(grid) {
      grid.prepareCellForEdit.addHandler((s, args) => {
        const evt = args.data;
        if (evt.type === 'keypress' && evt.key !== 'F2') {
          grid._edtHdl._fullEdit = false;
        }
      });
    }

    https://stackblitz.com/edit/js-zdtg3y?file=index.js

  • viethdhe130200

    Replied 23 February 2022, 9:34 am EST

    Thank you very much. Great answer, exactly what I needed right now.
    I have a question regarding "focus to the cell": https://www.grapecity.com/my-account/my-support/case/CAS-29034-T9L7Z5
    Looking forward to hearing from you. I should like to thank you once again for your comments. <3

  • viethdhe130200

    Replied 23 February 2022, 3:37 pm EST

    Hi, Sharad.tomer, your way is exactly what I'm looking for. But after carefully testing a number of cases, I found that when I change the Date value and then press the UP arrow key or the DOWN arrow key, the value is not correct as I entered, for example:

    - First, the value of the original cell input date is 2022/01/25. Then I input the date to 2022/04/05 and then press the UP arrow, the date will now become 2022/01/26 (I expected value is 2022/04/05)
    - Then, the date of the cell input date is 2022/01/26. I input data to 2022/04/05 and then press the DOWN arrow, the date will now become 2022/01/25 (I expected value is 2022/04/05 )
    - After testing, I concluded that if I change the cell date value and then press the UP arrow, it will add 1 day to the old value. Otherwise, 1 day will be subtracted from the old value when the DOWN arrow is pressed. The value will be as I expect when using the LEFT or RIGHT arrow key
    - Here is the video link I practice with your answer. Please watch to better understand what I am trying to explain: https://www.youtube.com/watch?v=ycuuljRxemg
    - That's the problem I'm having. Hope to hear from you or another admin soon. Thank you so much <3

  • sonu.pandey

    Replied 27 February 2022, 9:41 pm EST

    Hello,

    The observed issue occured because when you click UP/DOWN array keys the underlying InputDate control handles that operation(instead of FlexGrid) and changes the date according to the up/down key as till that time the entered date hasn't been committed to the grid(underlying data). Therefore you would be required to commit the changes before moving to another cell when the arrow keys are pressed. Please refer to the sample link below demonstrating the same:

    Sample link: https://stackblitz.com/edit/js-znpzch?file=index.js

    Let me know if that's works for you.

    Regards

  • viethdhe130200

    Replied 2 March 2022, 3:00 pm EST

    I see how this would handle the problem I am asking regarding the DATE column. But it will error in the AMOUNT column, when I change the value for the first time it is ok but if I go below the cell that I edited to continue editing it is not working.

    Here is the video link I practice with your answer. Please watch to better understand what I am trying to explain: http://www.youtube.com/watch?v=cXdUJGwHBd0

    That's the problem I'm having. Hope to hear from you or another admin soon. Thank you so much <3

  • sonu.pandey

    Replied 3 March 2022, 11:28 pm EST

    Hello,

    The above-provided workaround was to handle the columns having editor contain dropdown, as when the cells having dropdown editor handle the keydown event and move the selection up/down respectively. Therefore you would be required to call the stopImmediatePropagation() method for those cells and move the selection up, down, left, and right manually. Please refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/js-donjff?file=index.js

    Regards

  • viethdhe130200

    Replied 8 March 2022, 8:01 pm EST

    Thank you for your answer, @sonu.pandey. Thank you very much.

  • viethdhe130200

    Replied 9 March 2022, 1:31 am EST

    Hi, @sonu.pandey,
    If I use your way: pointerEvents.stopImmediatePropagation() when selCol == 1 || selCol == 2 then I won't be able to use enter key to move to next cell.
    Because in my program is setting when pressing enter will go to the next edit cell of that row
    So do you have a solution to the problem I'm facing?
    Thank you very much. Looking forward to receiving your or someone's reply soon.

  • sonu.pandey

    Replied 9 March 2022, 7:53 pm EST

    Hello,

    In that case, you can handle a condition for ENTER key so when the ENTER key is pressed and selCol == 1 || selCol == 2 then you don't require to call the stopImmediatePropagation() method. Please refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/js-4kmjpi?file=index.js

    Similarly, you can handle other conditions as well as per your requirements.

    Regards
    Sonu Kumar Pandey

  • viethdhe130200

    Replied 10 March 2022, 7:32 pm EST

    Hi, sonu.pandey

    I also custom some other cases in flexgrid. For example, when I press the Backspace key and Delete key, it deletes the value of that cell. Or End key, H0me key ....

    As you mentioned above, it will handle a condition for Enter key when ENTER key is pressed. So I also add handle conditions for Backspace and Delete key when Backspace or Delete is pressed?

    So it is problem that there will be some keys I can't control that it'll have by default? I'm afraid I can't control all those keys. And when that key is pressed, nothing will happen.

    Looking forward to receiving your or someone's reply soon. Thank you very much.

  • sonu.pandey

    Replied 13 March 2022, 8:16 pm EST

    Hello,

    I think my response was not adequately explained, I apologize for that. What I meant was you can call the stopImmediatePropagation() method to stop the default behavior of the keys handled in the keydown event, as in this case, we have taken 4 arrow keys so instead of adding a condition for stopImmediatePropagation() in different scenarios, you can call the method inside arrow key conditions only so every other key would work normally. You can refer to the sample link below for reference:

    https://stackblitz.com/edit/js-jz7xzk?file=index.js

    Hope it helps.

    Regards

  • viethdhe130200

    Replied 16 March 2022, 1:00 pm EST

    Hi sony.pandey,

    First of all, thanks for your answer and your enthusiasm. It's my fault because I haven't explained it clearly to you. Thank you very much <3

  • viethdhe130200

    Replied 14 April 2022, 12:33 pm EST

    Excuse me, sonu.pandey. I'm having a problem here, in my flexgrid there will be a childItemsPath like the following link: https://www.grapecity.com/wijmo/demos/Grid/TreeGrid/EditableTreeGrid/react ,when I colapse this row, if your custome suggests it in below answer (https://stackblitz.com/edit/js-jz7xzk?file=index.js), the UP/DOWN array keys will still work even the rows that have been collapsed (that is, visibleIndex of row = - 1) . How can if that row is hidden ( visibleINdex = -1) , the UP/DOWN arrow keys will skip and not go through that row anymore and just go through the displayed rows ( grid.selectedRows[0].visibleIndex not equal -1 ). Hope to receive a reply from you or an admin soon. Thank you so much everyone <3

  • sonu.pandey

    Replied 17 April 2022, 9:49 pm EST

    Hello,

    Sorry but we couldn't understand the exact issue you are facing, could you please provide some more information on the issue you are facing with a sample to replicate the issue at our end.

    Also, if you want to implement a condition inside the event handler to check if the row is visible or not then you may use the isVisible property of the Row and implement the condition inside the handler. If you still face an issue then please provide a sample replicating the issue so that we can investigate the issue further and assist you accordingly.

    Regards

  • viethdhe130200

    Replied 19 April 2022, 1:40 am EST

    When I press UP/DOWN arrow keys in the Date column. In case of moving from readOnly cells, moving from edit cell to readOnly cell, moving from readOnly cell to edit cell, the scroll will jump even though the scroll has not reached the bottom (except in the case of moving between edit cells, it will be OK). Hoping to hear from wijmo soon to help me solve this problem. I have attached an example below, please practice moving UP/DOWN arrow keys in the Date column of the example to better understand the problem I am facing. Thank you very much <3

    Link example: https://stackblitz.com/edit/js-yqetex?file=index.js

  • Marked as Answer

    sonu.pandey

    Replied 19 April 2022, 10:35 pm EST

    Hello,

    You may use the preventDefault() method to prevent the scroll to move up/down when the UP/DOWN key gets pressed. You can refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/js-ezdnse?file=index.js

    Regards

  • viethdhe130200

    Replied 20 April 2022, 1:52 am EST

    Great answer. Exactly what I'm wanting. Thank you very much <3
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © GrapeCity, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.