Issue
I am facing an issue with row-level actions in a table where the default selected row is the first row. This means that if I want to update or delete a specific row, I have to select it first. I want to be able to perform actions on a row by simply clicking a button in that row without having to select it first. I solved this problem by using triggeredrows and setting the table default value to -1.
Resolution
The solution to the problem is to use a triggeredrow and set the defaultvalue of the table to -1. This way, whenever a row-level action like update or delete is performed, it will only affect the selected row and not the default selected row.
To implement this solution, first, set the defaultvalue of the table to -1. This ensures that no row is selected by default when the table is loaded.
Next, add a triggeredrow to the table. A triggeredrow is a hidden row that is triggered by a user action, such as clicking a button within a row.
When the user clicks the button in a specific row, the triggeredrow is activated and the row data is passed to the action. This way, the action only affects the data in that particular row.
Here's an example code snippet that demonstrates how to implement the solution:
<Table defaultvalue="-1">
<triggeredrow id="tr_action">
<!-- row level action goes here -->
</triggeredrow>
<Row>
<!-- table row data goes here -->
<Button onclick="tr_action.setTriggeredRow(this.parentNode)">Perform Action</Button>
</Row>
</Table>
In this example, the default selected row is set to -1, and a triggeredrow with the id "tr_action" is added to the table.
Inside each table row, a button is added with an onclick event that triggers the "tr_action" triggeredrow for the current row.
When the button is clicked, the row data is passed to the triggeredrow, and the action inside the triggeredrow only affects the data in that particular row.