Question about Flex Grid and Auto Complete with tab key

Posted by: bzhang on 2 January 2018, 7:33 pm EST

    • Post Options:
    • Link

    Posted 2 January 2018, 7:33 pm EST

    Hello Wijmo Team,

    I am developing a project with Wijmo version 380 and Angular 5 which created by angular-cli.

    Now, we are facing a problem of keyboard friendly optimization.

    Here is the requirement of the project. We need a grid which contains editable columns. User add a new row of data. When user typing in productId in “Product #” field, the grid send http request to api side to query suggest products for user select. Some times, user may not select any of the options. User may type 1-5 digits of the productId, then type “tab”. The grid needs to complete the productId to 6 digits with “0”. Then send the 6 digits productId to api side and query product to display on the grid as part of data of current row. If api side couldn’t find any products match the productId, grid needs to focus back on the “Product #” field and force user to correct the productId.

    For this requirement, we user Flex Grid and WjAutoComplete together. Now, we are facing a problem which we have no idea to fix it. That is user type “tab” as soon as the user type 1 digit of the productId, cursor moves to next field. “Product #” field shows nothing and we find that we couldn’t get the 1 digit value which user typed in. We couldn’t emit any event without that value, and also, this action does not trigger any events of WjAutoComplete. When we edit the “Product #” field again we find that the 1 digit value shows in WjAutoComplete.

    The attachments are the code of html and type script files of our project.

    We have worked on this problem for days. Please help us with a solution.

    Boyang

  • Posted 2 January 2018, 7:35 pm EST

  • Posted 2 January 2018, 7:57 pm EST

    Here is a short video of this issue.

    screen.zip

  • Posted 2 January 2018, 10:16 pm EST

    Hi,

    We are sorry, we are unable to run the sample due to incomplete code.

    Please try to set keyActionTab property to MoveAcross or CycleOut for FlexGrid.

    Also, please reveal the behavior for selection change using mouse click for different cell on same row.

    If possible, could you please share a running demo sample for investigation.

    ~Manish

Need extra support?

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

Learn More

Forum Channels