Selecting a grid-cell - Smart UI Components

Tagged: grid cell select

This topic has 17 replies, 2 voices, and was last updated 1 year ago by svetoslav_borislavov.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
April 11, 2023 at 12:00 pm #104685
Peter
Participant
Hi,

I’m not having luck selecting a specific cell on a newly added row. If I have a cell selected on the last row and I use the arrow down key, I add a new row to the grid, I “try” to select it and I put the first cell into edit-mode using beginEdit().

However, event though the first cell on the new row does go into edit mode, the previously selected cell on the row above is still dark blue and if I use Tab key to exit the cell editor and move to the next cell, it is also the next cell on the upper row which is getting selected.

So how do I make sure that the new row (specific cell) gets selected too?

I have the following going on when I use the arrow down key on the last row in the grid:
```
const new_row = row_add();

grid.rows.push(new_row);

//grid.selectCells([new_row.id], ['Posting_Date']);
grid.beginEdit(new_row.id, 'Posting_Date');

function row_add()
        {
            console.log('row_add');
            
            const new_row = new Smart.Grid.Row({ data: {
                Line_Number: get_next_row_number(),
                Posting_Date: new Date().toString('dd-MM-yyyy'),
                Document_No: '',
                Account_No: '',
                AccountName: '',
                Description: '',
                Debit_Amount: 0,
                Credit_Amount: 0,
                Beholdningskonto: null,
                attachment_count: 0                
            }});

            return new_row;
        }
```
April 12, 2023 at 7:17 am #104688

svetoslav_borislavov
Participant

Hi,

Here you may see that the code that you have sent is working correctly:
https://codepen.io/svetoslavjqwidgets/pen/BaqoJpa
The only modification is that the beginEdit is in a setTimeout because of the selection method.

Can you please send us a demo of the problem, as we couldn’t reproduce it

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

April 12, 2023 at 8:42 am #104691

Peter
Participant

link to demo app and video showing the problem sent.

April 14, 2023 at 10:58 am #104704

Peter
Participant

OK, so it turned out that there was a method focusAndSelect() that I should use instead of selectCells() which I had missed – methods not listed alphabetically…

Anyway, using this instead fixed the problem I had.

Is there a way to prevent TAB from navigating to the next row (or creating a new one) when pressed from the last column in the grid?

April 18, 2023 at 2:12 pm #104718

Peter
Participant

Please – Is there a way to prevent TAB from navigating to the next row (or creating a new one) when pressed from the last column in the grid?

April 19, 2023 at 5:19 am #104721

svetoslav_borislavov
Participant

Hi,

You can use the onKey callback to prevent default behaviour if the key is Tab.
Note that you should manually select the next cell if you prevent the default behaviour.

https://codepen.io/svetoslavjqwidgets/pen/JjmRrwa

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

April 19, 2023 at 10:14 am #104724

Peter
Participant

I can see that I can disable Tab navigation all together this way, but I actually want the Tab navigation, I just want to prevent Tab on the last cell, to move to the row below (or in my case create a new row, if current row is the last row in the grid).

So that Tab just runs through the cells of the current row and stays on that current row, also when the last cell is reached, in which case navigation should go back to the first cell.

Another thing is that I have noticed something a bit odd about the Tab navigation. If I navigate through the cell with the arrow keys, the ‘change’ event fires, but when I navigate through the cells with Tab, the ‘change’ event is not fired.

April 20, 2023 at 5:41 am #104726

svetoslav_borislavov
Participant

Hi,

Yes, as I told you when you prevent the default behaviour you should manually select the next cell.
You can get the current selection and calculate the next cell based on the current selected.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

April 20, 2023 at 8:55 am #104729

Peter
Participant

Yup I fixed it now – I wasn’t aware that the onKey triggers before the event occurs and so I can at this point check which is the current column.

April 20, 2023 at 9:39 am #104730

Peter
Participant

So since the onKey() catches the tab-key before the cell selection changes, I can overwrite the behavior which is good, but there is still an issue that I don’t quite get and that is why the ‘change’ event doesn’t fire when the cell selection is made with the tab-key.
The arrow-keys do make the ‘change’ event fire, but not the tab-key…
Is there a way to get the selected cell as a result of tab-key being pressed? – other than looking at the previous column and then seeing what’s next in line (if any)?

April 25, 2023 at 12:50 pm #104757

Peter
Participant

Can you tell me why it is that selection made with Tab key, doesn’t trigger ‘change’ event?
And if so, how I can make it happen?

Right now I can navigate back and forth in the grid with arrow keys and they trigger ‘change’ every time, but Tab doesn’t for some reason.

April 26, 2023 at 4:11 am #104770

svetoslav_borislavov
Participant

Hi,

This is a bug, thank you for reporting it. As a workaround, you may use the onKey callback to detect the TAB keypress.
Here is an example: https://codepen.io/svetoslavjqwidgets/pen/XWxRMWV

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

April 26, 2023 at 12:44 pm #104776
Peter
Participant
Ok thank you, that makes sense then.

How about preventing Enter key from navigating down in the rows?

I would actually like Enter to act the same way as Tab , which currently ends the ends the editing and moves on to the next cell on the same row.

Pressing Enter however, ends the editing and moves to the cell below in the same column (aka on the next row).
- This reply was modified 1 year ago by Peter.
- This reply was modified 1 year ago by Peter.
April 27, 2023 at 4:25 am #104782

svetoslav_borislavov
Participant

Hi,

You can prevent it the same way as the Tab key, in the onKey function with a conditional.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

April 27, 2023 at 6:54 am #104783
Peter
Participant
That is what I have been trying, but it does not work.
```
onKey(e)
    {
        console.log('e.key: '+ e.key);
        
        if (e.key === 'Ener')
        {
            e.preventDefault();            
        }
    }
```
Despite of this, the Enter key still ends editing and moves focus to the cell below on the next row.
Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.