Need to style one column header in one data grid

Anvil Q&A
1

What I’m trying to do:
I want to style one specific data grid header on one specific data grid.

What I’ve tried and what’s not working:
Tried using css in the theme.css to target a data grid id and column id, but seems that the data grid id sometimes changes when I switch pages (anvil extras routing) or refresh the page.

For example, the data grid id is usually “0” but sometimes switches to “1” when I switch to a different page and come back to the original page.

Before:

image
image2218×322 77.5 KB

After:
image
image2218×322 77.4 KB

Code Sample:

div[data-grid-col-id="OJLQEN"][data-grid-id="0"] .anvil-component {
  text-align: center !important;        /* Center align the text */
}

Clone link:
share a copy of your app

2 
        x = get_dom_node(self.data_grid_1).querySelector('.data-row-col')
        x.style.backgroundColor = 'red'

This will change the style of the first column… not sure how to get the 3rd column using query selector.

3

I’d probably use a Data Row Panel in place of the built-in grid header. No CSS required.

3 Likes
4

I ended up creating a role like so:

.anvil-role-center-fourth-col div[data-grid-col-id="VJQQOR"] .anvil-component {
  text-align: center !important; /* Center align the text within the specific component */
}

The good thing is that column ids are consistent (fourth column always has that ID)

Thanks @p.colbert for the suggestion - I might go that route next time for full control.

5

Only in that one Data Grid instance. (And any that you may have cloned/copied from it verbatim.)

I have many Data Grids in which that is not the case. For example (excerpt from one of my .yaml files):

- type: DataGrid
  properties:
    role: null
    columns:
    - {id: QSCRAS, title: Include in Evaluation, data_key: in_illustration, $$hashKey: 'object:37792',
      width: '90', expand: false}
    - {id: DWBGMZ, data_key: product_is_predefined, title: 'Product is Predefined ',
      width: 87, expand: false}
    - {id: ZSOLSZ, title: Contract Type, data_key: type_name, width: '120', $$hashKey: 'object:65685',
      expand: false}
    - {id: GGXVBB, title: Product Name, data_key: description, $$hashKey: 'object:65686',
      expand: true}
    - {id: LCHKTC, title: Edit Row, data_key: column_4, width: '60', $$hashKey: 'object:65688'}
    - {id: FGNRLC, title: Run Audits, data_key: run_reports, $$hashKey: 'object:42050',
      width: '62', expand: false}
    - {id: FYGXRQ, data_key: copy_row, title: Copy Row, width: '60', expand: false}
    - {id: ZYZUJR, title: AV Date, data_key: av_date, $$hashKey: 'object:739', width: 95,
      expand: false}
    - {id: BUCPWQ, title: AV ($), data_key: av, $$hashKey: 'object:16020', width: 93,
      expand: false}
    - {id: UOTICA, title: Delete Contract, data_key: column_6, width: '64', $$hashKey: 'object:65690',
      expand: false}
6

Thanks for pointing that out - your solution is the only robust one then!