Inline edit(editableTable) and Ajax refresh


I'm using an editableTable to add new records to a quotation. When adding a record the user can choose a product from a drop down list. This drop down has a onchange action which gets some values from the product and sets it in the new record. After that it will do an ajax refresh to show the values on the screen.
But after the ajax refresh the styling of the highlighted row is not correct anymore..

CSS class before refresh is OSFillParent InEditMode, but after the ajax refresh the css class is gone, this is not desired. In fact, it would be preferred if the next field in the row got the focus.

Sample project :

Any help!?

This seems like a bug. What exactly do you refresh? The entire table, just the row, the individual fields?
Hi Kilian,

I'm refreshing some fields individual.
Do you have any idea to work around?
So you refresh an individual field, and then the CSS class of the entire row is gone? That is odd. Can you try to refresh the entire row? Or the entire table?
Hi Kilian,

No, it's a bit different: I refresh one or more individual fields and these fields lose there css class.
When refreshing the entire table results in losing the newly created and highlighted row. That is the reason I'm refreshing the fields individual. As far as I know it isn't possible to refresh the row.

Please take a look at the sample project and you can see by yourself whats going wrong..
Hi Martin,

I discussed this with a collegue, and he told me this is a known problem. I quick google tells me there's been a post on this before, with OS promising to look into it, which was a follow-up to this. That was March, I'm not sure why it takes OS so long to fix something this serious.

EDIT: According to this post it should've been fixed a long time ago, but it wasn't.
Hi Kilian,

Thanks for replying! I will send it to support.

Hi Martin and Kilian,
Unfortunately this is a bug in the Outsystems Platform. However, there is a workaround that you can use to overcome this issue. The idea is to add the class "InEditMode" when needed. Check the espace in attachment.
I hope this can help you.

Hi Martin and Kilian,

Just one more clarification:

In this discussion you talk about an issue regarding an ajax refresh against one of the inputs of the editable table. This has the workaround that I provided in my previous post.

Also, you refer to another issue regarding an ajax refresh against the editable table itself. The problem was that the editable table was adding a new empty row per ajax refresh made. This is, in fact, already solved in revision as you can see in the link above.

"Fixed editable table not being properly updated after an Ajax Refresh (#811110)"

If you have more questions, feel free to ask.

Seems like it's still an issue as of this writing (Service Studio 10.0.608.0) - every control I refresh from an edit change handler goes "unedited"-looking.

Thank you, Gonçalo; that workaround still works! I was going... a bit nuts trying to figure that out :)

-- Ritchie Annand

2018 and this problem still persists, have exactly the same issue, after Ajax refresh of one input field in editable table the InEditMode class is gone, whcih led me to Google and stumble on this post since 2015......... OutSystems???

This not just limited to CSS only i am struggling with js also , i am using TinyMce initially and it is not displayed on my web screen and when i click a button i did a ajax refresh and make the div visible inside which my TinyMce webblock is placed. Doing this on Ajax Submit it stopped working and doesnt render the control but when i do the same on Submit it works fine and render the control properly.

Any idea to overcome this will be appreciated.



Hi Pramod,

You are talking about TinyMce, this doesn't seem related to Editable Tables, the topic here. If you want to discuss something that's related but not directly about the topic, please create a new post, from which you can refer to this topic, thank you.

Jumped into the same issue, OS 11, still not fixed.

This is quite funny: in OS 10 I just tried to add the "InEditMode" to Style Classes of the inputs and it was buggy enough to solve the issue!

The strange part is that for the rows that shouldn't be editable, it clears this class, so they look correct!

And for the edited row this fixes the removal of the class.