Preface:
Hey guys! 
I’m going to preface this post by saying that I’m not a front end developer. That’s one of the reasons I’m using anvil. It makes it easy to make complex websites. I really enjoy it! If there is anything that I can do differently, or if I’m re-inventing the wheel please let me know. (Clone Link)
Problem:
I was having a lot of issues with the DataGrid CRUD tutorial. I know the basic tutorial works fine, but I had a table with many rows (>15) that I wanted to work with. So I added the “wide” asset as described here. And so the problems arise…
The basic CRUD tutorial + the horizontal scroll solution does not work properly because the DataPanelRows are nested within the DataGridPanel. When we set the “wide” role, I believe we are making the 2 added DataRowPanels (plus the default DataRowPanels) unable to stack vertically. Instead, they line up horizontally causing lots of strange issues.
Solution:
- Create a Data Grid
- Under the Repeater Panel component create a custom template.
- With the custom template add 2 DataRowPanels for displaying data (visible) and editing data (hidden).
- Follow the guide for creating the CRUD (linked above).
- Create a role for horizontal scrolling called “wide-dg”. Under the Theme section make sure to add the CSS below to theme.css in Assets, and create a proper role in Role.
- You can then assign the ‘wide-dg’ role to your Data Grid, and everthing should work properly!
/**
From Original tutorial:
**/
.anvil-role-wide-dg .data-grid-child-panel {
overflow-x: auto;
}
.anvil-role-wide-dg .anvil-data-row-panel {
flex-wrap: nowrap;
min-width: -moz-min-content;
min-width: min-content;
}
/**
Added setup:
**/
.anvil-role-wide-dg .anvil-panel-section-gutter {
flex-wrap: wrap;
min-width: -moz-min-content;
min-width: min-content;
}
