Wijmo Flexgrid - Tab is not working when selectionMode is 'Row'

Posted by: pratik.darak on 21 November 2019, 7:29 am EST

    • Post Options:
    • Link

    Posted 21 November 2019, 7:29 am EST

    I have added an EventListener ‘keydown’ for the Flexgrid on which I am implementing the following logic to navigate to next cell:

    const n = (window.event) ? e.which : e.keyCode;
            let startRow = s.selection.row;
            let startCol = s.selection.col;
    
            if (n === 9) {
                if(this.gridSelectionMode === SELECTION_MODE_CELL) {
                    if (startCol === s.columns.length - 1) {
                        if (startRow === s.rows.length - 1) {
                            startRow = 0;
                            startCol = 0;
                        } else if( startRow < s.rows.length ) {
                            startRow += 1;
                            startCol = 0;
                        }
                    } else {
                        startCol += 1;
                    }
                }
                this.gridSelectionMode = SELECTION_MODE_CELL;
                this.flexGrid.selection = new CellRange(startRow, startCol);
            }
            e.preventDefault();
    

    But when I select a row, I set the ‘selectionMode’ to ‘row’. So once I select a row and click ‘tab’, it is not listening to the tab event and hence not navigating a particular cell.

    Can someone help me with this? Along with cell navigation, I also want tab to navigate to next cell when we have a row selected. Thank you.

  • Posted 25 November 2019, 2:27 am EST

    Hi Pratik,

    You can simply use the keyActionTab property to move the selection to the next cell and then to the next row if the row has ended.

    This property takes an enum value of wijmo.grid.KeyAction type. You may set its value to wijmo.grid.KeyAction.CycleOut:

    grid.keyActionTab = wjGrid.KeyAction.CycleOut
    

    API Reference:

    Regards,

    Ashwin

  • Posted 25 November 2019, 2:48 am EST

    Hi Ashwin,

    Thank you for your quick attention to this.

    I tried the keyActionTab and set it’s value to ‘Cycle’ to switch through the tabs and it worked fine. But I have a couple of follow-up questions:

    1. When I am on a last cell in the table and then I press ‘Tab’, I want the selection to be taken to first cell of the table. Can that be achieved using this setup?

    2. Currently, when I select a row and then press ‘Tab’, it is taking the selection to 2nd cell of the selected row. I want it to be selected to 1st cell of that row. Can that be achieved using this?

    If this can not be achieved using the default setup then I guess using the earlier approach of using ‘keydown’ will be better. But in that case, when I select a row, it is not listening to the ‘tab’ event after it. Can you help me with it?

    Again, thank you so much for your time and patience.

    Appreciate your help on this.

    Regards,

    Pratik

  • Posted 26 November 2019, 12:18 am EST

    Hi Pratik,

    To achieve the desired behaviors, you will still need to use the ‘Cycle’ key action but with a keydown event.

    1. In the keydown event, if the current selection is the last row and column, then call the preventDefault method and select the first cell using the select method of FlexGrid.
    2. For this, you will also need to handle the mousedown event. In this event handler, you will need to set a variable to true or false according to the clicked cell. Then, in the keydown event handler, if the selection is on the first column and the previous variable is true, then call the preventDefault method.

    Please refer to the sample link below and let me know if this works for you:

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

    ~regards

  • Posted 26 November 2019, 3:05 am EST

    Hi Ashwin,

    Thank you for your inputs. I tried this setup and it worked just fine for me. But I have 1 concern regarding this approach.

    When we select a row, the “SelectionMode” is switched from ‘Cell’ to ‘Row’ which is as expected. But when I press a tab, it correctly switches to proper cell BUT the “SelectionMode” stays as ‘Row’ when it should be switched to ‘Cell’. This might cause some problems down the road. Also, when I try to manually switch the “SelectionMode” to ‘Row’, it will start ignoring the tab inputs.

    Is this the desired behavior? What we can do to avoid this behavior when switching “SelectionMode”? Please let me know.

    Again, thank you so much for your help on this. Really appreciate it.

    Regards,

    Pratik

  • Posted 26 November 2019, 4:00 am EST

    Hi Pratik,

    In the sample that I provided, I have explicitly set the selectionMode to ‘Row’. That is why the selection mode does not change after pressing the Tab key. I have updated the sample to use the default SelectionMode:

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

    Also, when we click on the row header and the row gets selected, the SelectionMode does not changes to Row. The default value of SelectionMode is ‘CellRange’ and clicking on the row header just select the cell range of that row.

    ~regards

  • Posted 27 November 2019, 12:14 am EST

    Hi Ashwin,

    By the above statement, do you mean that we are not supposed to change the Selection modes even though we change the selection from ‘Row’ to ‘Cell’?

    In our project, we are changing the Selection Mode values from ‘Row’ to ‘Cell’ & vice versa depending on the selection. Also, we are dynamically passing it to the “wj-flex-grid” element by using “selectionMode” property. But this is also causing the flex grid to be refreshed every time we change the selectionMode.

    Is this the ideal setup for FlexGrid? Maybe we are using it wrong and hence can you shed some more light on “SelectionMode” and the ideal use for the same?

    Thank you so much!

    Regards,

    Pratik

  • Posted 27 November 2019, 12:34 am EST

    Hi Pratik,

    The SelectionMode is used to specify how the cells in the FlexGrid should be selected. The default value of this property is ‘CellRange’. Due to this, we can select multiple cell ranges including a full row and multiple rows as well as a single cell. And yes, the FlexGrid will be refreshed whenever the value of SelectionMode changes and it could downgrade the performance.

    I think that using the default value of SelectionMode will fulfill your requirements.

    I hope this clears your doubt but if you have any other queries, feel free to contact us.

    ~regards

  • Posted 27 November 2019, 12:39 am EST

    Hi Ashwin,

    Yes. This clears my doubt. I will have it set to a default value and will let you know if in case I have any further question or concern regarding this.

    Thank you once again!

    Regards,

    Pratik

Need extra support?

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

Learn More

Forum Channels