SfDataGrid doesn't scroll automatically when pressing tab

[Ammar]

Hi,

As the title itself describes the situation, The tab traversal experience is not smooth in SfDatagrid. I'm using custom widgets inside the cells and the navigation is fine until I reach the last visible cell for cells that are out of bounds of the viewport SfDatagrid acts like they don't even exist unless I scroll manually. What is the reason for this behavior?

Please assist me as this is really stressful for me and I have a strict deadline to meet, thanks.

Best Regards,

Ammar

[Abinesh Palanisamy]

Hi Ammar,

We conducted a test with a simple sample on our side. We added the button and dropdown widget in the cells and performed Tab navigation. The DataGrid scrolls automatically when it reaches the last visible cell. We could not replicate the issue as you described. We have included a video reference for your review.

To assist you further and understand the issue better, we kindly request you to provide additional details about how you are placing the widget and performing Tab navigation on your side, or steps that may help us reproduce the problem. Additionally, if possible, please provide a video recording demonstrating the issue for better clarity. We also kindly request you to modify the attached sample to reproduce the issue and provide any additional details.

Regards,

Abinesh P

Attachment: SfDataGrid_31b2c26b.zip

[Ammar]

Hi Abinesh,
I'll gladly modify the sample provided, but before I do that I would like to inform you that the cells you added fit within the viewport I added 15 columns in my sfDatagrid and the cells that are out of viewport/visible range dont get built and aren't even rendered unless I scroll over to them manually. ​Please try adding more columns (including an RawAutoComplete and Textfield widget in between) and then let me know if the issue doesn't persist. In that case I'll modify the sample for you to reproduce the issue.

Best Regards,

Ammar

[Ammar]

Here is the video demonstration you requested for better understanding of the problem.

Attachment: SfDataGrid_31b2c26bresponse_1dae139e.zip

[Abinesh Palanisamy]

Hi Ammar,

Based on the provided video, you have maintained focus on the TextField widget. When you perform Tab navigation while the focus is on the TextField, the framework handles the key navigation and jumps to the next focusable widget in the view. As a result, there is no focus on the DataGrid, which is why the DataGrid doesn't scroll when reaching the last visible cells.

In the SfDataGrid, when the focus is on the DataGrid and you reach the last visible cell through Tab key navigation, the key navigation is handled by us to make the DataGrid scroll from our end. This behavior is managed on our side, so based on the focus on the DataGrid, we ensure that the grid scrolls appropriately during key navigation.

So, when the focus is on the TextField, the DataGrid doesn't scroll via key navigation. After thorough analysis, we've suggested a workaround. Currently, you can achieve the expected behavior by using  editing and RowSelectionManager. Instead of using TextField widgets in the cells, you should maintain a Text widget. You can then modify the Tab key behavior using the handleKeyEvent method in the RowSelectionManager. When Tab is pressed, we move the current cell to edit mode. This approach maintains focus on the DataGrid and handles key navigation on our end. Additionally, wrap the Focus widget as a parent of the DataGrid, and when focus is removed from the DataGrid, clear the selection to remove focus from DataGrid. This approach makes each cell behave like a TextField, and ensures that the DataGrid scrolls when reaching the last visible cells.

We have included a sample and video reference for your reference. Please review this sample for more details and adapt it to suit your specific requirements.

Regards,

Abinesh P

Attachment: SfDataGrid_25287b29.zip