I’m working with a grid row (child table) form where each row has its own set of fields (please refer to the attached screenshots for reference). Currently, I’m able to navigate between rows using keyboard shortcuts (Ctrl+Down to move to the next row and Ctrl+Up to move to the previous row). However, I would like to enhance the user experience by adding custom navigation buttons (such as “Next Row” and “Previous Row”) that allow users to move between rows without using the keyboard shortcuts.
Is there a way to implement custom buttons for navigating to the next and previous rows?
I would appreciate any advice or code examples on how to implement this.
Just to clarify, I don’t need to add new rows — the rows are already added, and I just want to make it easier for users to navigate between them to enter values in the fields. Currently, users can either use the keyboard shortcuts (Ctrl+Down and Ctrl+Up) to move between rows, or they can click the “Edit” button next to the row to edit its fields, but that process is a bit cumbersome.
To make the form more user-friendly, I’d like to add custom “Next” and “Previous” buttons.
I hope that clears up the request.
Just like Control Up and Control Down work, the same functionality is to be added in Previous Row and Next Row. So what will be the difference, and the shortcut has been given, which also makes the work easier. So by adding the button, a complexity is to be created, but if you want to do that, you have to customize the code of the grid.
As you mentioned, the functionality of the “Next Row” and “Previous Row” buttons would essentially mirror the Ctrl+Down and Ctrl+Up shortcuts. While these shortcuts already make navigation easier, I understand that adding buttons can be more user-friendly in some cases. That said, I want to implement this customization globally across all grid forms.
I plan to add the necessary code through custom_app/public/js/custom_script.js. Do you have any suggestions or examples on how I can implement this for all grid forms? Specifically, I’m looking for guidance on how to modify the grid’s JavaScript to create custom “Next Row” and “Previous Row” buttons that function in the same way as the keyboard shortcuts.
