Editable table with mutli-select column

Iam working on a project where we received a requirement to develop a editable table with a multi-select column in it.

For example if I want to assign one task to multiple users, I will select the task in the first column and users in the second column of the table as shown in the below screenshot.

After repeating the same process for multiple tasks, I need to save all the data to database at one Save click.

Please suggest an approach to achieve this functionality.

One thing you can try is create a new WebBlock that would receive the TaskId and that webblock presents the list of users already assigned to that task using the select2 from SilkUI.

Would this help?


I'm assuming you start with 1 or 0 empty rows and you add new rows and select the values.

1) You can start by binding the form to a source list that has 1 or 0 empty rows

2) as you select values in each row, you are assigning them to the widget List in the corresponding element

3) when you finish, the widget list will contain all the selected values and you can save them in mass or iterate the widget list and create each row in the DB with a For Each.

Is this the info you need?

Hi Suresh Babu Malayathi,

I suggest you use Data Grid Component. You can bulk edit data.

Data Grid Component: https://www.outsystems.com/forge/component-overview/5554/data-grid

"Use Data Grid to create enterprise-grade data grid interfaces. Enable your users to access, explore, and edit large datasets, in a responsive interface. Giving your users an Excel-like UI is more suitable and time-effective than designing a custom solution every time they need to manipulate dense datasets in bulk efficiently.

The features include:

  • Editing

  • Filtering

  • Formatting

  • Globalization

  • Grouping

  • Selection

  • Sorting

  • Virtual scrolling"

Data Grid Sample: https://outsystemsui.outsystems.com/DataGridSample/

(You can delete, insert, update a lot of data into database with 1 button.)