Enable a save button on a grid row, when the text column changes (dirty)

App Building
1

Context:
I am trying to create an editable grid with 2 text columns and a save button in the 3rd column. The text will change when the value has been edited from Unchanged (disabled button) to Save (enabled button) so that the user knows they can then save/update the values in that specific row and for that specific entity. I'm trying to come up with a good approach so that the value of the button is unique for each row when edited and so it is obvious when a change has been made or not and that the user can update it.

I know that a table/grid has a .recordUpdates and a .changeSet property both of which can be used to compare dirty changes in a grid. I also know that I can use the selectedRow property to check the value of a given row vs the underlying original data. I'm struggling with how to use the ternary property to determine the specific row comparison vs the changeSet.

I have found a couple of topics on this so far but none that seemed to outline exactly what I'm trying to do:

1 Like
2

hi, welcome to the forums.

Not entirely sure I follow the use case here, is the button text on each row changing and/or the disabled state based on a "dirty" flag check?
So something like: {{ (table1.recordUpdates.map(x => x.id).indexOf(currentRow.id) < 0) ? true : false }}
ie - does the current row ID exist in the list of recordUpdates, if so enable the save button

example app:
forum.json (13.6 KB)

3

Thanks @dcartlidge for the idea. I'll see if I can explain a little more clearly.

Use case:

  • The grid contains a list of Schools with names and acronym's as two editable columns. It is loaded from an API call and the ID's are hidden but they are there in another invisible column.
  • In the 3rd column I have a button for each row. When the grid is first loaded I want the button to be disabled and to show 'Unchanged' or could just be 'Save' but disabled.
  • When the user edits one of the rows I then want the 'Save' button to be enabled so that it's visually obvious that in order for the change to be saved they need to click the button (which will make an API call to update the record)
  • I will give your suggestion a try as that sounds like it might work
4

ok, well that example app I posted does this kind of thing to give you some pointers

5

@dcartlidge That suggestion worked perfectly. I used it for the button text:
{{ (OrgsTable.recordUpdates.map(x => x.id).indexOf(currentRow.id) < 0) ? 'Click Row to Edit' : 'Save' }}
and for the enablement and disablement of the button:
{{ (OrgsTable.recordUpdates.map(x => x.id).indexOf(currentRow.id) < 0) ? true : false }}

I imagine I could use the same logic to style the button when it is enabled. Thank you so much for the help!

1 Like