Updating the row partially based on query result in a modal

I have a table on which I defined an action "Edit". When clicked the modal window is opened and the data of the table.selectedRow is visualized partially. Some properties of the row should not be edited by the user.

Furthermore, four properties are controlled by "OrderId". When editing OrderId and validation ran successfully, a query is run to fetch the vin/plate/make/model bound to that particular order.

I then want that when that query has run, the results update the modal/selectedRow.
image
I've tried the following approaches without success:

  • referencing the inputs on the form and use setValue
  • referencing the inputs on the form and use the value properties
  • referencing the selected row directly and use the value properties

After adding some console logging I could see that the query as well as the javascript is run. Only after calling 'setValue', the actual content of the control is unchanged.

Neither of these approaches actually sets the data and shows it in the modal.

Hey JIF,

Have you tried setting value like this example - efVin.setValue(getCarDetails.data.Vin[0]);

getCarDetails.data.Vin represents an array and you're trying to set an array to a text component thus why choosing first item of the array should fix the issue.

Let me know if this helps!

While looking at it further and logging more, I had an epiphany.
As you point out indirectly, I have to format the return data as an array and then use those props when calling setValue. Before I was actually trying to assign object arrays to a textbox value

My solution:
image

1 Like