Hi Community,
I'm working with the OutSystems O11 Reactive DataGrid and facing an issue with change tracking that I'd like to solve properly.
Current Implementation:
I have a screen with an editable DataGrid that includes:
The Problem
When I change a dropdown value, the Save Changes button enables correctly via the OnCellValueChange event. However, if I change my mind and select the original value again (reverting the change), the Save Changes button remains enabled even though there are no actual changes to save.
Expected behavior: The Save Changes button should disable when all values return to their original state.
Current behavior: The button stays enabled even after reverting to original values.
What I've Tried
I'm currently using the OnCellValueChange event to enable the button, but I haven't implemented any logic to track and compare against the original values.
Questions
Hi @Karthik Santosh
To answer your questions one by one:
It is best to use the built-in change tracking provided by Wijmo FlexGrid, which is exposed through API_Data\GetChangedLines.
The grid includes a built-in configuration for tracking changes called trackChanges. I believe this is enabled by default in the OutSystems Data Grid. Reference: Tracking Changes in CollectionView.
Based on my testing, API_Data\GetChangedLines also tracks reverted changes. The dirty indicator reflects this behavior as well.
I also tested this scenario using a dropdown column. When the value is changed and then reverted back to its original value, GetChangedLines does not report it as a change.
(!) An important aspect to be aware of is how the grid (including Wijmo FlexGrid) registers changes by default. Changes are only committed once the edited row loses focus (is deselected). As a result, updates are not registered immediately when a value changes, the column’s OnChange event alone does not mark the row as changed by default.
I'll look for a way to register the changes automatically and come to you with a possible solution.
Hi @Mihai Melencu, Thank you for your kind help, appreciate it.I’ve noticed an interesting behavior: while the 'dirty mark' disappears visually when changes are manually reverted, the logic doesn't seem to sync up. Specifically, GetChangedLines.HasChanges continues to return True, leaving the action button enabled even after the field loses focus. Also a note related to my dropdown configuration. I’m using Static Entities to populate them through aggregates, but the Value and ID are both being returned as the Label. Would this cause any issue?
There is a DataGrid feature called GetChangedLines that returns the rows that were modified in your DataGrid. However, there is a problem: if there are fields without values, they are not included in the JSON result.
What I did was create a JavaScript snippet that receives the JSON returned by GetChangedLines and merges it with a default JSON structure. Example:
const defaultStructure = { field1: null, field2: null, field3: null};
I assign the GetChangedLines JSON to a variable (for example, const jsonData = ...) and then merge it with this default structure. This way, even if a field is empty, the structure is still filled with null values and keeps a consistent format.
After that, I use JSONDeserialize in OutSystems to convert the JSON into a record list, and then I loop through the list with a For Each to save the data.
To enable and disable editing, I use two buttons inside an If widget controlled by a variable. When the Edit button is clicked, this variable is set to true and the selected fields become editable. When the user clicks Cancel or Save, the variable is set back to false and the fields return to their normal (read-only) state.
Hi @Hugo Leonardo,
Thank you for your reply, in fact I have actually tried this approach before. It ensures the JSON is consistent for JSONDeserialize but it doesn't solve the state issue. Even with the structure merged, the button stays enabled.
One way to handle this is to trigger a Refresh Data. Depending on your Data Grid, this should not have a performance impact.
Save the original data on load and compare it with the current grid data on change to enable or disable the Save button.
while this may not be the optimal approach, it is a workable solution. Sharing the oml would allow us to review it and potentially offer more refined guidance.
hello @Karthik Santosh hope you find this well,
This is a pretty common DataGrid behavior, so you’re not alone 🙂 The short answer is that Reactive DataGrid doesn’t automatically “unmark” a row as changed when you revert a value back to its original one.
Best practice is to store a copy of the original data (for example in a Client Variable) when the screen loads. On OnCellValueChange, compare the current row values with the original ones. If all fields match, manually clear the “dirty” state for that row and recalculate whether any row still differs before enabling the Save Changes button.
There’s no built-in way today to detect “net-zero” changes. Even GetChangedLines will still report changes if values were modified and reverted, so custom comparison logic is the reliable approach.thankyou,