Solved

How we can change the Headings Style in Acumatica grids?

  • 17 December 2021
  • 5 replies
  • 549 views

Userlevel 7
Badge +8

Hello,

I was womndering is there any way to change the Headings Style in Acumatica grids? For example Change Fore/Back color or font style. I used this help from Stackoverflow

https://stackoverflow.com/questions/42429061/acumatica-styling-a-specific-column-in-pxgrid/70338582#70338582 

and managed to create the below but I’m wondering how I can set the same color to the grid headins?

 

 

icon

Best answer by aaghaei 20 December 2021, 22:55

View original

5 replies

Userlevel 5
Badge +2

If it’s a global change you can modify Acumatica controls theme files located in folder:
App_Themes\Default\00_Controls.css
App_Themes\Indigo\00_Controls.css

This is a better option than replacing the ‘ASPX.cs’ file.

I added this test style for GridHeader CSS class at the end of theme files:
.GridHeader {
  background-color: yellow !important;
  color: black !important;
  font-family: courrier !important;
}

After clearing web browser cache the changes will be applied to all grid controls inside Acumatica:

EDIT

Changing each column header individually is going to be a challenge. I see no direct access to this control in ASPX.cs file. If that’s exact then there’s only JavaScript which you can use:

document.getElementById("ctl00_phL_gridTasks_colHS_0_0").childNodes[0].style = "background: yellow !important"

Userlevel 7
Badge +8

Thank you very much @Hughes Beausejour. Not all columns have the same color. I will try JavaScript to see how it works out

Userlevel 5
Badge +2

You can use instructions here to setup the JavaScript object:
https://stackoverflow.com/a/56606990/7376238

 

Note that it is not best practice to do so and it will not pass ISV Certification if required.
Keep in mind that columns might change based on the column configurator settings (top-left button of grid).

Userlevel 1

Hi, @aaghaei did you find a solution for this issue?

Userlevel 7
Badge +8

@Thulshi it is not possible with C# but you can make it work using JS but it might behave differently by each browser I decided not to do it.

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved