Datagrid column alignment

Anvil Q&A
1

How do I set the alignment of the column headers of a DataGrid control?

I can set the alignment of the items inside the row templates as centered, but the headers are not aligned with the content as shown in this snapshot:
image
I would like to independently control the alignment of each column. In the snapshot I would like the first header to be on the left and the others centered, but I can live with all columns centered.

I tried adding this in theme.css, but it didn’t help:

.auto-grid-header {text-align: center !important;}
1 Like
2

Hi Stefano,

I’m on my cellphone at the moment so I can’t share an example, but do you have better results when you disable the automatic headers and add your own (i.e., an additional datarow panel)?

If I remember correctly, this allows me to align or misalign items (in the header or body) as I wish.

Apologies if I’m not understanding the question.

3

Hi Allan, close, but not really what I am looking for.

I disabled the automatic headers and added the row template form on top of the data grid, and the data binding for the headers wasn’t finding anything and the headers was showing a bunch of None.

Then I typed a dictionary in the data binding for the property item of the header, something like {'col1':'Header 1','col2':'Header 2'} and it looked like it was working.

But the row template shows up inside the body and with the same font, not above the separator line.

Any suggestion?

4

Hmm, okay.

Does this look like the kind of control you would like?

There are two examples below just to show that the items in the body (repeating panel) can be aligned independently from the items in the header (data row panel).

Just to be clear , I’m aligning the labels themselves, not the parent row objects.

Example app:
https://anvil.works/build#clone:WBGVT55WSZ3QPUKO=ZFBJPPKAAUATQIDCXS4A6TWZ

sc
sc.PNG994×513 6.55 KB

4 Likes
5

This looks like more like it!

I think the difference between your working approach and my failed attempt is that I tried inserting the form used as a row template, while you added a brand new DataRowPanel.

1 Like
6

Another way to align the header row labels:

for header_row in self.grid.get_components():
      for comp in header_row.get_components():
        comp.align = 'center'
      break
4 Likes