Keyboard delete on a cell in Flexsheet

Posted by: kuhnimanagam_raznin on 22 September 2018, 3:00 am EST

  • Posted 22 September 2018, 3:00 am EST

    Hi Team,

    Is it possible to disable Delete key on a cell in Flexsheet?I tried doing it in the cellEditEnding event as below.This doesnt seem to work.

    flexsheet.cellEditEnding.addHandler(function (s, e) {
    if (e._data.keyCode == 46)
    e.cancel = true;
    });

    Thanks,
    Raznin
  • Marked as Answer

    Replied 23 September 2018, 3:25 pm EST

    Hi Raznin,

    To disable the Delete key, you may handle the 'keydown' event and call preventDefault() to prevent the default behaviour of the delete key.
    Please refer to the following code snippet:
    grid.hostElement.addEventListener('keydown', function(e){
    if(e.keyCode == wijmo.Key.Delete){
    e.preventDefault();
    }
    },true);

    You may also refer to the following sample which implements the same: https://stackblitz.com/edit/js-urjyby?file=index.js

    Regards
    Sharad
  • Replied 20 April 2022, 8:28 am EST

    Hi Sharad,

    Both when trying this solution in my application and when testing your stackBlitz, the delete key on my mac still deletes the selected cells' contents. I tried this with event.keyCode === wjcCore.Key.Back and event.keyCode === wjcCore.Key.Delete.

    Thanks
  • Replied 20 April 2022, 7:42 pm EST

    Hi Ryan,

    For mac machines, delete key code is 8, try using the following code:
    grid.hostElement.addEventListener(
    'keydown',
    function (e) {
    if (e.keyCode == wijmo.Key.Delete || e.keyCode == 8) {
    e.preventDefault();
    }
    },
    true
    );


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

    Regards
  • Replied 21 April 2022, 2:58 am EST

    I appreciate the response Sharad,

    In my example wjcCore.Key.Back is the equivalent of 8. I also tried your exact code and it did not work. My "grid" is a flexSheet element and not a flexGrid element. Could that be the reason?

    Edit: I have noticed that it does work when editing the cell, but it still performs a delete when I am just selecting the cell, which is the opposite of what I want. I would like keycode 8(delete on Mac) to work when editing inside the cell but not to delete contents of selected cells when pressed.

    Thank you
  • Replied 21 April 2022, 8:07 pm EST

    For flexsheet, please add the keydown handler on flexsheet's parent element before actually creating the flexsheet instance. Here is a sample demonstrating the same:
    https://stackblitz.com/edit/web-platform-r4ujug?file=script.js

    Let me know if this doesn't work for you.
  • Replied 28 April 2022, 11:06 am EST

    Do you have a similar solution that works with Angular?

    I tried adding it to the parent of
    <wj-flex-sheet></wj-flex-sheet> before it is loaded into the dom but it still does not prevent delete.
  • Replied 28 April 2022, 3:24 pm EST

    Hello,

    You may refer to the sample link below demonstrating the same using Angular:

    https://stackblitz.com/edit/angular-lntheb?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 2 May 2022, 10:20 am EST

    I appreciate the provided sample link, however for some reason this did not work. What did work was to replace preventDefault() with stopPropagation();

    Thank you for the help
  • Replied 3 May 2022, 6:01 pm EST

    Hello,

    I'm glad that you were able to resolve the issue. Thank you for sharing.

    Regards
Need extra support?

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

Learn More

Forum Channels