Wijmo Grid Input boxes edit on first click

Wijmo Grid Input boxes edit on first click

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

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  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,

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 2:51 pm EST

  Hi Wijmo Team,

  Please reply.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  johnsdy779

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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