Hi All,
I want to edit the action column. Currently, the grid's action column doesn't allow for editing.
Is there any way to enable editing for the action column in UI?
Thanks,
SK
Hi @Sathish Kumar R
You can use Text Column for editable purpose. and then add CSS to the column, to make it look like a hyperlink. Finally, use JS to make it can call an action when user click on it.
Bro, Action Column won't allow you to edit. Outsystems don't generate an input widget for Action Column.
If you need an edittable action column, let do some customization by Javascript on the Text Column. But the behavior seem to be weird if we can edit text in Action Column, because when we click the text, it will call the action.
Hi @Kiet Phan
Users will not edit existing values. they will only add new data when creating a new row. At that time, I need to add a value.
@Sathish Kumar R
got it, when user add new data, you can also set the value to the action column by this JS:
the Result:
I tried, but I am unable to achieve this. Whenever I try to add a new row, the action column should be editable, but it remains uneditable. Could you please share a working OML? I can also share my OML for you to review.
Thanks
You made me confuse abit. As I said above, the Action Column it will not be edittable (like a input widget). You can just set it's data value.
By the way is this what you need
Thanks for the clarification! Just to confirm, the Action column will be completely non-editable, even for new rows. I had initially thought it was only for existing values, so I appreciate you clearing that up.
Also, do you have any other ideas on how we might achieve this business goal?
Thanks for the suggestion! Do you have the JavaScript code for calling an action when the user clicks on it? As of now, The Text column have "On cell value change" event handler and "On column reorder" event handler, so how do we trigger the action when the user clicks the action?
Hi @Sathish Kumar R,
Outsystems doesn't provide an offical click event handler for cell. So we need to do it on JS.
I attached the OML file, you can check the solution.
Thanks @Kiet Phan
One more step forget—once the user clicks the column, how do we get the cell value in that click event?
Hi, You can get the value via row DataItem and pass it into the handler action.
I attached the OML, you can check it.
Thank you for the quick reply and solution! I appreciate your help.
You're welcome.
I think there is also a point you need to know, when user double click to edit the cell. We should not trigger the Action.
I already implement that. You can check the new attachment below.
Now when user double click to input cell value, the action will not be called.
okay, give more question if you have problems.
I'm happy to help.
Thanks! @Kiet PhanI think we should only trigger the action when the user clicks on an existing cell value, not on a new row entry. Since users can type data directly and they click new row cell value multiple time as well, we shouldn't call the action in that case. It shouldn’t be a double-click, just a single click on the existing cell. Am i right?
yes, you can check cell value in the javascript to check if the cell empty or not, and decide not to call the Action when it's empty.
Thank you so much for your wonderful help @Kiet Phan :-)
1. Add the Data Grid to the Page
2. Define the Action Column
In the Data Grid, you can add an "Action" column to define what happens when the user interacts with a row (e.g., click a button to edit, delete, or trigger custom behavior).
Go to the Columns tab of the Data Grid and add a new column.
In the "Type" property of the new column, choose "Custom" (this allows you to insert buttons, links, or any custom UI element).
3. Add a Button or Link for Edit/Delete Actions
4. Create the Actions
Example of Edit Action Logic:
outsystemsCopy code// Pseudocode for the EditActionGetRecordById(CurrentRow.Id)OpenModalWithRecordData(Record)
outsystemsCopy code// Pseudocode for DeleteActionDeleteRecord(CurrentRow.Id)RefreshDataGrid()
5. Enable Inline Editing (Optional)
Steps:
Hello,
To enable and configure an Action Column for editing in an OutSystems Data Grid, you can follow these steps. The Action Column typically contains buttons like Edit, Delete, or Custom actions that can trigger specific logic when clicked.
Steps to Add and Configure an Edit Action Column in a Data Grid:
1. Add a Data Grid to Your Screen
2. Enable the Action Column
a. Select the Data Grid on your screen. b. Go to the Columns property of the Data Grid widget in the Properties panel. c. Click the “+ Add Column” button and select Action Column.
3. Customize the Action Column
a. Set the Header Title to something like "Actions". b. Under the Actions section, click Add Action. Choose the Edit action or create a custom action if you want.
The Edit button will now appear in the action column for each row of the grid.
4. Implement the Edit Logic
a. On Edit Button Click: - When you click on the action button, it can trigger a client action or server action. - For example, in the OnClick event of the button, you can open a Popup, Modal, or Form where the user can edit the selected row’s details.
b. Get the Row Data: - To access the specific row’s data (such as ID, name, or other fields), you can pass the relevant row data as input parameters to the action.
c. Save Changes: - After the user edits the data, you will need to implement the logic to update the record in your database and refresh the Data Grid to reflect the changes.
5. Example Logic for Edit Action
6. Handling Grid Refresh After Edit
Example for Opening a Popup on Edit Button Click:
In the OnClick event of the Edit button, you can create a Client Action that opens a popup for the selected row:
Popup_Editor.Show(RowData) // Show popup with the selected row's data
Once the popup is edited and saved, trigger the logic to update the data in the entity or list and refresh the Data Grid.
Hope this helps.
Some of the answers in this post seems to be AI-generated. I have checked them with some AI detectors to confirm and it seems to be the case. (Correct me if I am wrong)
I am not against AI generated answers. But while seeking the answers using AI is a good move to help people from in the forum very quick, it requires one to check the content and make sure it provides the correct solution.
The answers, although related to data grid, doesn’t answer what the OP is asking.
As members of the forum using AI-generated answers:
1. Please make sure to double check and confirm the generated answer. It may cause confusion and misdirections. Let’s try to understand the questions very well so we will be able to give proper answers.
2. Test what you are suggesting based on the answer that you are giving, especially if it is a complex one. You may give a sample oml that demonstrates the solution. Or some screenshots that explains your solution further visually.
3. Add some links, if applicable, that points to the documentation and further readings or another answer in another post.