I would like to allow a user to select a dropdown value in a data grid and then save that selection back to a data table.
The values for the dropdown are stored in a datatable “countries” (all possible countries). The grid saves it’s data to a datatable “employees” with a column named “country” that is linked to the datatable "countries.
I have a working example. But… the layout is totally messed up. I am trying to rearrange the column fields in the editor but I cannot find a way to do it. Who can guide me into the right direction?
On a quick look, I saw that you manually added some extra DataRowPanels, and I think that is likely the source of your issues. Have you read through the Docs already? Customizing DataGrids in the way you seem to be trying to do can be tricky. It requires an understanding of their structure: Anvil Docs | Data Grids
I wasn’t able to run the clone of your app because it was lacking a dependency. See here for how to share a clone link that includes the dependency:
Or if you’re using the Beta editor - make sure you tick the box “include dependencies with your clone”
I just modified the data model with additional columns, including a linked column and I added a dropdown field to the grid.
I guess, what is finally confusing me is the fact that I am unable to control the positioning of the input elements that are (mis-)placed on one of the DataRowPanels. Any attempt to drag an drop them into a single row (they are currently wrongly distributed over two rows) or to change their order just does not work.
Ok, I see. Here’s the thing. When dragging and dropping things in a DataRowPanel in a DataGrid, you need to be editing in the Form containing the DataGrid, not directly in the RowTemplate1 form. To get there, with Form1 open in the IDE (Design view), double click on the DataRowPanel you want to edit the layout of. It should then look like this (shown after rearranging the edit elements into their correct places):
I tried it… but it is not working. Can you actually rearrange the input und dropdown fields in the example project in a way that they appear side by side in one row?
I tried it again per your instructions and again without success. The problem is that the GUI editor (current and beta) only allows to arrange the elements on top of each other and not side by side (As indicated by the blue line that shows up above or below an element when dragging). Thus it is also impossible to move all elements on one row (one item always breaks onto a new line)
I must be totally missing something here… this must be so trivial. Also tried Chrome and Edge in case this is a browser issue (It’s not).
Would it be possible for you to record a short animated GIF of the entire process? I would really appreciate it.
I’m not sure what you mean about side-by-side, though. If you want to arrange multiple components together, try first dragging a ColumnPanel or FlowPanel into the slot in the row template. Then you can arrange other components within that.
thanks!