Gridlines in GridPanel or DataGrid

Anvil Q&A
1

Is there any way to get gridlines to better show the alignment or rows and columns in a GridPanel or DataGrid?

The border property just draws a border around each row. I would also like vertical lines separating the columns.

1 Like
2

It requires for you to play a little with CSS to find the right settings

If you are using Google Chrome: ctrl + shift + I to open DevTools or use different DevTools to inspect the HTML and CSS of your page.

Then go down the structure, down to your rows in data grid:
image

Then start playing by applying CSS border property there.
Data Grids are not easy to style. Sometimes if you apply it on one place, it will be applied on different obejcts and cause the whole style to be doubled. To avoid that, you should locate something that really exist and you can target by a CSS roles like:
image
and then just target the objects you want to change with multiple divs.

For example chaging of the background color of odd rows:

/*color style for the odd rows of repeating panel*/
.anvil-role-expandable-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:nth-of-type(even) {
  background-color: %color:rows_tables%;

}
with multiple div’s i go down the sturcture to the rows and then apply only there my role.
In your case you need to change data rows panels and data rows columns.

1 Like
3

Thanks, Klaudiusz, That’s what I was afraid of. If that’s the level of CSS wizardry and microfiddling required to make this work, I’m going to give up on it. But I appreciate your effort.

4

i always use the tonal-data-grid role for data grids which gives you gridlines and rounded corners.

1 Like