Formatting of Column Grouping

tford

I set up Column Grouping for three text columns to be Grouped under "CM".

I am able to control the Column Header Style for each of the three columns to make them right justified to match the numbers in each of the columns.

I would like to center the Column Grouping over the three column but don't see any way to accomplish that.

Has anyone done this?

Jaymer

like this?

Screen Shot 2020-02-25 at 10.58.38 AM.png

tford

Yep

Jaymer

pretty straightforward.
finds the column heading based on its exact text string, then adds a class to it.

this code in the Render Script of the Grid:

var grid = widget
grid.thead.find("th.k-header[data-title='Time']").addClass ('fix-col-group-timesheet');
grid.thead.find("th.k-header[data-title='Parts & Labor']").addClass ('fix-col-group');

The CSS: (the "hover" part is prolly not needed)

/* Column Group Headings in Grids  */
.fix-col-group,.fix-col-group-hover:hover {
	color:#fff!important;
	background-color:#3452a9!important;
	text-align: center!important;
}

/* Column Group Headings in Grids TIMESHEET */
.fix-col-group-timesheet,.fix-col-group-timesheet-hover:hover {
	color:#fff!important;
	background-color:#716602!important;
	text-align: center!important;
}

Screen Shot 2020-02-25 at 12.39.29 PM.png

tford

Thanks Jaymer!

Believe it or not, I have not tipped my into using CSS with Aware.

Jaymer

Save the css above in a file named jaymer.css
Put it in AwareIM/webapps/"yourAppname"/custom/css

Shift-Refresh your app

If you start the chrome INSPECTor , click on sources across the top, look down the tree on the left you should see that jaymer.css got loaded

If so, that’s it.
Proceed with aware changes

tford

Thanks!