Combobox problem inside EditableTable

Combobox problem inside EditableTable

  

Hi,

I created a new Editable table and add two comboboxes (ID Card Type and Issue Country), as shown on this image:


The way it works is essentially when a value on the first combobox is selected, the second combobox will change based on the first selection. Everything works, but problem is when the action Ajax Reloads the second combobox the layout is updated to this:


The ''Issue Country'' box just disappears, because its css just changed to not editable using this rule: 

body .EditableTable input:not(.InEditMode), body .EditableTable textarea:not(.InEditMode), body .EditableTable select:not(.InEditMode) {
    color: #333;
    font-size: 14px;
    border: 1px solid transparent;
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


How to avoid this layout behavior? Cause i need to update the second combo to reflect the new value. The environment I use is Version 9.1.601.0.


Regards,

André

In the extended property of the drop down set "InEditMode = 1" if you want the dropdown to be editable.

I guess it should work, else share your app and I'll try to help you.

Hi Sree Natarajan,

I've tried your suggestion and it didn't work. So I created a new OML so you could test the problem on your own. Hope it can help.

Thanks for helping me.

André

Hi Andre,

Bug in OutSystems.

Temp Solution: Add the below js script either in page or in the site to overcome this issue

$(document).ready(function() {
   $('body').on('DOMSubtreeModified', function() {  
        $('[data-widget-type="EditableTable"] tr.Selected.OnEdit select').addClass('InEditMode');        
    });    
});