Pin first three columns in Data Grid

[kvanitha780]

What I’m trying to do:
I’m trying to pin first three columns in DataGrid

What I’ve tried and what’s not working:

Pin first columns in datagrid

Hi, I’ve got a datagrid with allows horizontal scrolling (see below gif), what I want to do is to freeze/pin the first three columns, is there any way to do this? If not then I think I have to put two datagrids in a column panel, any other options?! [scroll.gif]

I’ve tried what’s mentioned in this post, but it’s not working

Code Sample:

.anvil-role-wide-dg .data-grid-child-panel {
  overflow-x: auto;
/*   margin-left: 13em; */
}

.anvil-role-wide-dg .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
/*   margin-left:-13em; */
}

.anvil-role-fix {
position: absolute;
margin-left:0em;
}

Clone link:

Login

[meelvoorfer]

Hi,

this is the css i’m using, works for me!

.anvil-role-wide .data-grid-child-panel {
  overflow-x: auto;
  overflow-y:hidden;
  margin-left:103px;
  
}

.anvil-role-wide .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  margin-left:-103px;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

[kvanitha780]

Hi, the solution you suggested is not working

[meelvoorfer]

Sorry you also need the anvil-role-fix.
So after some experimenting this will do the trick, you also have to set the width of your first column in the datagrid to 140,

.anvil-role-wide-dg .data-grid-child-panel {
  overflow-x: auto;
  overflow-y:hidden;
  margin-left:140px;
}

.anvil-role-wide-dg .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  margin-left:-140px;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

.anvil-role-fix {
position: absolute;
margin-left:0em;
}

[kvanitha780]

Thank you, but I’m not able to see the buttons in the repeating panel(edit and delete). I added fix role to them too.