Hello Mahmoud, You can try the following

1. Add a button in the row coloumn to delete
2. On click on the button get the current table row ID through an input
3. Use table delete action to delete the current row
4. refresh the aggregate.

HI,

https://success.outsystems.com/documentation/how_to_guides/development/outsystems_data_grid/how_to_use_the_outsystems_data_grid/

Steps to Add Action Column in Data Grid

1. Open Your Module: Load your OML file in OutSystems Service Studio.

2. Add Action Column:

   • In your Data Grid, right-click on the column header area.
   • Select Add Action Column. This will create a new column specifically for actions like editing and deleting.

3. Add Edit and Delete Buttons:

   • Drag and drop Button widgets into the Action Column.
   • Set the Text property of each button to "Edit" and "Delete".

4. Edit Button Logic:

   • For the Edit button, add an On Click event.
   • In the event logic, navigate to the screen/form where you edit the item (e.g., using Navigate action).
   • Pass the selected record's identifier to the edit screen.

5. Delete Button Logic:

   • For the Delete button, add an On Click event.
   • In the event logic, use the Delete Entity action to remove the selected record.
   • Optionally, prompt the user for confirmation before deletion using a Popup.

6. Refresh Data Grid:

   • After deleting an item, ensure to refresh the Data Grid to reflect the changes. Use the Refresh action on the Data Grid or rerun the query that populates it.

Hi Mahmoud,

You can use the following documentation to be familiar with the DataGrid widget. This is very useful even from the UI perspective

Data Grid Sample

Additionally, you can install the OutSystems Data Grid Sample from the forge to see how to implement the actions you want.

Outsystems DataGrid Sample

Hope it helps.

Best.

To use an Action Column in a Data Grid for deleting and editing rows, you can follow these steps:

1. Add the Action Column to the Data Grid:

• Open the screen containing your Data Grid.
• In the Data Grid's Properties, look for the Columns property.
• Click on the "Columns" property to manage the grid's columns.
• Add a new column and select the type as "Action Column."

2. Configure the Action Column:

• In the Action Column settings, you can add buttons for different actions like "Edit" and "Delete."
• For each button, set the following properties:
  • Button Type: Select the button type you prefer (e.g., "Icon" for an icon button).
  • Icon: Choose an icon that represents the action (e.g., a pencil for edit and a trash bin for delete).
  • Action: Set this to a client action that you will create for editing or deleting the record.

3. Create the Client Actions for Edit and Delete:

• Go to the logic tab of your screen and create a new Client Action for editing.
  • In this action, you can navigate to an edit form or open a popup for editing the selected row.
• Similarly, create another Client Action for deleting.
  • In this action, use the Delete method for the entity or aggregate associated with your Data Grid and refresh the grid data afterwards.

4. Link the Buttons to the Actions:

• Go back to the Action Column configuration.
• For each button in the Action Column, set the On Click property to call the corresponding Client Action (EditAction or DeleteAction) that you created.

5. Passing the Row Identifier:

• When defining the Client Action for editing or deleting, pass the row identifier (primary key) as an input parameter so that the action knows which row to edit or delete.
  • In the button’s properties, under "On Click", pass the CurrentRow identifier to the action.

For Delete Action:

1. Delete Client Action:

   • Create a Client Action named DeleteRow.
   • Add an Input Parameter named RowId of the same type as your entity’s primary key.
   • Use a Delete Entity action from the logic toolbox and pass RowId to delete the record.
   • Refresh the Data Grid by calling the appropriate aggregate or Refresh Data action.

2. Configure Delete Button:

   • Set the On Click property of the delete button to DeleteRow.
   • Pass CurrentRow.Id as the input parameter.

By following these steps, you'll have an Action Column in your Data Grid that allows you to edit or delete rows directly. Hope this helps.