Formatting of Column Grouping

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
tford
Posts: 4238
Joined: Sat Mar 10, 2007 6:44 pm

Formatting of Column Grouping

Post by 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?
Tom - V8.8 build 3137 - MySql / PostGres
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Formatting of Column Grouping

Post by Jaymer »

like this?
Attachments
Screen Shot 2020-02-25 at 10.58.38 AM.png
Screen Shot 2020-02-25 at 10.58.38 AM.png (38.56 KiB) Viewed 6103 times
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
tford
Posts: 4238
Joined: Sat Mar 10, 2007 6:44 pm

Re: Formatting of Column Grouping

Post by tford »

Yep
Tom - V8.8 build 3137 - MySql / PostGres
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Formatting of Column Grouping

Post by 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:

Code: Select all

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)

Code: Select all

/* 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;
}
Attachments
Screen Shot 2020-02-25 at 12.39.29 PM.png
Screen Shot 2020-02-25 at 12.39.29 PM.png (107.35 KiB) Viewed 6091 times
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
tford
Posts: 4238
Joined: Sat Mar 10, 2007 6:44 pm

Re: Formatting of Column Grouping

Post by tford »

Thanks Jaymer!

Believe it or not, I have not tipped my into using CSS with Aware.
Tom - V8.8 build 3137 - MySql / PostGres
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Formatting of Column Grouping

Post by 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
Last edited by Jaymer on Tue Feb 25, 2020 10:06 pm, edited 1 time in total.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
tford
Posts: 4238
Joined: Sat Mar 10, 2007 6:44 pm

Re: Formatting of Column Grouping

Post by tford »

Thanks!
Tom - V8.8 build 3137 - MySql / PostGres
Post Reply