Wijmo Grid Input boxes edit on first click

Posted by: johnsdy779 on 10 June 2021, 9:05 pm EST

  • Posted 10 June 2021, 9:05 pm EST

    Hi Wijmo team,

    https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

    In this snippet I can see the full name text boxes do not take focus on first click. We have to click 2/3 in order to make it editable. How can we make it editable on single click?

    Thanks,

  • Replied 10 June 2021, 9:37 pm EST

    Hi Wijmo team,

    How can I add events like focus out or onchange for Wijmo grid input boxes.

    https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

    In above snippet I am trying to add a onchange or focus out event for full Name Column


    As I am new to this can you please help.

    Thanks
  • Replied 13 June 2021, 2:51 pm EST

    Hi Wijmo Team,

    Please reply.


    Thanks
  • Replied 14 June 2021, 2:01 am EST

    Hi johnsdy779,

    We are sorry for the delay in response. We are working on your case and will update you tomorrow.

    Regards,
    Ashwin
  • Replied 14 June 2021, 2:25 am EST

    Hi,

    1. You can achieve this using the selectionChanged event of FlexGrid. If you wish to set this only on column Full name, you can do that as well. Please refer to the code snippet:
      startEditing(flex, e) {
    if (e.col == 1) {
    setTimeout(() => {
    flex.startEditing(true); // quick mode
    }, 50); // let the grid update first
    }
    }

    2. FlexGrid provides events called cellEditEndedwhich gets fired cell edit has been committed or canceled. You can also use cellEditEnding, which occurs when a cell edit is ending(useful to perform validations). So instead of focus out of input, you can use this event. As for onchange you can use the itemClicked event of the Selector class, which gets fired on change of selector input box.

    You can refer to the sample link below for reference:

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

    ~regards
  • Replied 14 June 2021, 2:51 pm EST

    Hi,

    In my first question, still on first click in the Full Name column the text is getting selected instead is it possible to show the cursor.

    As of now in your snippet I can see the cursor is getting displayed on second click.

    Thanks

  • Replied 15 June 2021, 10:40 pm EST

    Hi,

    It is expected behavior as on edit mode the input text gets selected. If you do not want the selection on edit start, you may set the selectionRange of the input element to none(0) and then move the cursor at the end position. Please refer to the sample below for reference:

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

    ~regards
Need extra support?

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

Learn More

Forum Channels