Angular2 flexgrid with dropdown but don't allow typing

Posted by: jeremyhalvorsen on 17 October 2019, 6:33 am EST

    • Post Options:
    • Link

    Posted 17 October 2019, 6:33 am EST

    I’ve got a flexgrid in an angular6 project and I’ve got it correctly displaying dropdowns using a datamap, but I’d like that cell to behave more like a select element. I don’t want to allow the option to type because I have too many people trying to type whatever they want, only for it to not be accepted and clear when the field loses focus (I don’t want them adding their own options).

    Is there a way to disable the input text editing and have focus on the cell just open the dropdown?

  • Posted 17 October 2019, 5:16 pm EST

    Hi Jeremy,

    You will need to handle the keydown event of FlexGrid call the preventDefault to prevent editing accordingly:

      onKeyDown(e: KeyboardEvent) {
        // disable editing if country column is in edit mode
        if(this.grid.editRange && this.grid.editRange.containsColumn(1)) {
          if(e.key != 'Tab' && e.key != 'Enter') {
            e.preventDefault();
          }
        }
      }
    

    You will also need to handle the beginningEdit event of FlexGrid to disable quick editing in the column:

    onBeginningEdit(s, e) {
        // disable quick editing in country col
        e.cancel = e.col === 1 && e.data.type == 'keypress'
      }
    

    You may refer to the sample below:

    https://stackblitz.com/edit/angular-nfomtn

    Regards,

    Ashwin

  • Posted 29 October 2019, 12:29 am EST

    This seems like something that should be built in as an option to just treat a dropdown as a select box and not need to click in just the specific spot the dropdown arrow is. I tried to disable the clicking and use jquery to trigger a click on the dropdown but it just didn’t work perfect, so just gonna skip for now. But thank you for your help.

  • Posted 29 October 2019, 7:15 pm EST

    Hi Jeremy,

    I have forwarded an enhancement request to the dev team with internal tracking id 403708. I will give you an update as soon as this feature is implemented.

    ~regards

  • Posted 3 February 2020, 10:59 pm EST

    Hi Jeremy,

    The dev team has said that since this scenario is not so common, this feature is not feasible. You will have to use the workaround provided earlier.

    ~regards

Need extra support?

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

Learn More

Forum Channels