Data grid: visible internal borders

Anvil Q&A
1

Hi,
I’m preparing a data grid for printing. I’d like to show all borders within the Data Grid (so that the printed form is easier to hand-write information).

I have found that I can enable borders on the Data Grid itself (outer border) and each row can have a border. Can anyone help me to include column borders too? Maybe there’s a CSS solution?
Thanks!
Brendon

2

Just drop labels in the cells of the row, bind them to the data, and then put borders on the labels.

1 Like
3

Hi,
Thanks for the suggestion.
When I try this (with blank labels so that a user has space to handwrite a response) the labels don’t fill the grid:

image
image1556×402 4.91 KB

I’ll keep trying with this, and see if I can figure out how to make the label expand.

Brendon

4

You need to narrow the distance between rows. Search ‘thin-row’ I’ll demonstrate, but I won’t be in front if a computer for a day or two.

5 
.anvil-data-row-panel>.data-row-col {
    border: 1px solid #888 !important;
}

it’s not perfect but it’s simple

if you only want this while printing you can create a role for your datagrid

self.data_grid.role = 'datagrid-printable'

.anvil-role-datagrid-printable .anvil-data-row-panel>.data-row-col {
    border: 1px solid #888 !important;
}
2 Likes
6

Thanks - simple is good. And in this case, it’s exactly what I want.

1 Like