Cascading filter combo boxes in editable table

Cascading filter combo boxes in editable table



Rookie here. I want to implement a cascade filter behavior in a editable table for two combo boxes. Basically it's a simple example: A project can have multiple elements, the first combo box is for selecting a project, the second combo box is for selecting one of the project's elements. I have a one-to-many relationship between the entities. I've looked over several threads here, and what I've done is the following: 

- created local variable for the Id selected in the first combo box (ProjectId);

- used the local variable in the aggregate (GetElementsByProjectId - in Preparation) for the second combo box;

- created On Change action for the Project combo box ( here I assigned the ProjectId to my local variable, refresh GetElements and Ajax Refresh on the Elements combo box);

After doing this, I have the following issues: 

1. After selecting the Project, somehow the Element combo box becomes grayed - out (but still selectabile and clickable);

2. When on a different line in the table I select a different Project, the aggregate for the Elements is recalculated for all the lines that I have and it takes into consideration the latest value for the ProjectId. Basically I end up only with the latest values for the Elements. 

Note: this solution seems to work when I implement this in a form where I only have a single combo box for project and a single combo box for elements. I think I have to filter somehow based on the current line's ProjectId, but I'm not sure how to do that. Also tried the WebBlock implementation from a similar forum question, but no dice. 

I am using Outsystems 10.0.405.0 and the environment is in cloud.



Daniel Stefan

Hi Daniel,

The first issue you have might be a problem with the Editable Table, I've heard similar complaints from other users. The second is a rather inherent problem with the way Tables work in OutSystems. Each input-like widget is specified only once when designing the screen, which means that all rows of the Table share the same data. The only way I can think of to bypass this is to use a Web Block that has the ProjectId as input, and notifies back what the user selected. But I'm not sure this would play nice with an Editable Table (as opposed to a normal Table Records).

Hi Daniel,

I am also facing the same issue and I come up with a solution which might help you.

I tried to see the UI issue in browser's developer mode and I found that "InEditMode" class is missing after widget refresh.

So I use below jquery in RunJavaScript action after widget refresh and it solved the issue.

SyntaxEditor Code Snippet

"$('#" + ComboBox.Id + "').addClass('InEditMode');"