When using the CFGRID tag (type="html"), there is no built-in way to align the data in the columns. The dataalign attribute of the CFGRIDCOLUMN tag is not available for the HTML grid type. There is a simple CSS trick to align the columns.
Each column in the grid has its own css class, and there is also a class that applies to all columns. The x-grid-col class allows you to apply formatting to all of the columns at once, for example: .x-grid-column {text-align:right;}. The rest of the columns have numbers associated with them, starting with 0 as the first column. So, the code below aligns all of the grid columns to the right, then sets only the first and second columns to align left.
<style type="text/css">
.x-grid-col {text-align:right;}
.x-grid-col-0 {text-align:left;}
.x-grid-col-1 {text-align:left;}
</style>
You can also update just the column headers using a similar method. The headeralign attribute of cfgridcolumn also doesn't work for HTML grids.
<style type="text/css">
.x-grid-hd {text-align:center;}
.x-grid-hd-0-0 {text-align:left;}
.x-grid-hd-0-1 {text-align:left;}
</style>
Feb 14, 2008 at 9:46 AM Great tip! Very helpful.
Mar 24, 2008 at 9:41 PM and to re-enable text wrapping for the table,
.x-grid-row td {white-space:normal;}
it didn't work straight off for me, but you should be able to do it per column with
.x-grid-td-1 {white-space:normal;}
now if only there was an easy to override column widths. this doesn't work because it's overridden by the javascript that sets up the table...
.x-grid-col-1 {width:100%}
May 19, 2008 at 5:28 PM Nice quick tip. Thanks.
I'm not sure why
.x-grid-row td {white-space:normal;}
didn't work "straight off", though I'm sure it has to do with the cascade order. Adding an ID specifier (for the form ID in my case) made it work:
#frmMyForm .x-grid-row td {white-space:normal;}
Aug 1, 2008 at 12:43 PM THANK YOU ALittleSlow! I've spent HOURS googling trying to figure out how to wrap text in cfgrid and it ONLY brings me to flash (not html) cfgrid various methods I couldn't figure out how to apply or just didn't seem to work. Mike's little style snippet and your form ID variant works, finally!!
Nov 10, 2008 at 11:16 AM THANKS. Works Great!
Dec 11, 2008 at 10:24 AM Gold, cheers mate
Dec 16, 2008 at 10:57 PM Had to use .x-grid-col-1 {text-align:center;} to center the first column, not .x-grid-col-0 {text-align:center;}. Other than that, great tip.
Thanks!
May 9, 2009 at 1:24 AM Thanks. Works like a charm.
Aug 10, 2009 at 5:49 AM I'm trying to use this but I'm not able to hide the underline on a href that I put on a cfgridcolumn ... any idea ?
Nov 16, 2009 at 4:14 AM Nice post I Like your site very well and continue to do so. I have bookmarked your site.
Dec 6, 2009 at 3:29 AM Hello,
I have a demo on http://www.cfforum.eu/examples/srappaille/cfgrid/styles.cfm
The sources are available on http://www.cfforum.eu/viewtopic.php?f=16&t=631 (with french comments, sorry)
Best regards
Feb 1, 2010 at 2:56 AM Hai,
first of all i'm sorry if my english not to good.
I have problem with this tips, when i have more than one cfgrid all of them will follow the css. I just think i might need more than one css, but i don't know how...??
Any idea ??
Thanks before,
Lady
Feb 1, 2010 at 10:02 AM @Lady - This should work if you specify the grid names in the CSS so that it only applies to the grid you want.
Example:
<style type="text/css">
#mygrid1 .x-grid-col {text-align:right;}
#mygrid1 .x-grid-col-0 {text-align:left;}
#mygrid1 .x-grid-col-1 {text-align:left;}
#mygrid2 .x-grid-col {text-align:right;}
#mygrid2 .x-grid-col-0 {text-align:right;}
#mygrid2 .x-grid-col-1 {text-align:right;}
</style>
Feb 1, 2010 at 10:29 PM Hai Mr. Michael...
thanks for your tips, but i'm so sorry, it seemed didn't work out for me
i had tried this :
<style type="text/css">
/*.x-grid-col {text-align:right;}*/
#data2 .x-grid-col {text-align:center}
#data2 .x-grid-col-0 {text-align:center;}
#data2 .x-grid-col-1 {text-align:center;}
#data2 .x-grid-col-2 {text-align:center;}
#data2 .x-grid-col-3 {text-align:left;}
#data2 .x-grid-col-4 {text-align:right;}
#data2 .x-grid-col-5 {text-align:right;}
#data2 .x-grid-col-6 {text-align:right;}
#data2 .x-grid-col-7 {text-align:right;}
#data2 .x-grid-col-8 {text-align:right;}
#data2 .x-grid-col-9 {text-align:right;}
#data2 .x-grid-col-10 {text-align:right;}
#ongrid .x_grid-col {text-align:center}
#ongrid .x-grid-col-0 {text-align:left}
#ongrid .x-grid-col-1 {text-align:left}
#ongrid .x-grid-col-2 {text-align:right}
#ongrid .x-grid-col-3 {text-align:right}
/*.x-grid-hd {text-align:center;}
.x-grid-hd-0-0 {text-align:left;}
.x-grid-hd-0-1 {text-align:left;}*/
</style>
But when i used it, all of my cfgrid became at left position.Infact i have 4 cfgrid, 1 is cfgrid that called data2 and others were ongrid,offgrid and totgrid and they have the same position as ongrid cfgrid.
I do really hope that u can help me solving my problem.
Thanks again,
Lady
Feb 7, 2010 at 9:53 AM @lady - I'm sure this can be done with just CSS. If you send me your sample page, I can take a look and recommend something. Also, let me know which version of CF. mike at brockettcreative dot com
Feb 14, 2010 at 10:18 AM Hai Mr. Michael....
Thank you for being so helpfull to solve my problem.
This is the sample of my simple program and i'm using CF 8.
<style type="text/css">
.x-grid-col {text-align:left;}
#data2 .x-grid-col {text-align:center;}
#data2 .x-grid-col-0 {text-align:center;}
#data2 .x-grid-col-1 {text-align:center;}
#data2 .x-grid-col-2 {text-align:right;}
#data2 .x-grid-col-3 {text-align:left;}
#data2 .x-grid-col-4 {text-align:left;}
#data2 .x-grid-col-5 {text-align:left;}
#data2 .x-grid-col-6 {text-align:left;}
#data2 .x-grid-col-7 {text-align:left;}
#data2 .x-grid-col-8 {text-align:left;}
#data2 .x-grid-col-9 {text-align:left;}
#ongrid .x_grid-col {text-align:center;}
#ongrid .x_grid-col-0 {text-align:right;}
#ongrid .x_grid-col-1 {text-align:left;}
#ongrid .x_grid-col-2 {text-align:left;}
#ongrid .x_grid-col-3 {text-align:left;}
#ongrid .x-grid-col-4 {text-align:left;}
#ongrid .x-grid-col-5 {text-align:left;}
#ongrid .x-grid-col-6 {text-align:left;}
#ongrid .x-grid-col-7 {text-align:left;}
#ofgrid .x_grid-col {text-align:center;}
#ofgrid .x_grid-col-0 {text-align:right;}
#ofgrid .x_grid-col-1 {text-align:left;}
#ofgrid .x_grid-col-2 {text-align:left;}
#ofgrid .x_grid-col-3 {text-align:left;}
#ofgrid .x-grid-col-4 {text-align:left;}
#ofgrid .x-grid-col-5 {text-align:left;}
#ofgrid .x-grid-col-6 {text-align:left;}
#ofgrid .x-grid-col-7 {text-align:left;}
#grd_grid .x_grid-col {text-align:center;}
#grd_grid .x_grid-col-0 {text-align:right;}
#grd_grid .x_grid-col-1 {text-align:left;}
#grd_grid .x_grid-col-2 {text-align:left;}
#grd_grid .x_grid-col-3 {text-align:left;}
#grd_grid .x-grid-col-4 {text-align:left;}
#grd_grid .x-grid-col-5 {text-align:left;}
#grd_grid .x-grid-col-6 {text-align:left;}
#grd_grid .x-grid-col-7 {text-align:left;}
/*.x-grid-hd-0-0 {text-align:left;}
.x-grid-hd-0-1 {text-align:left;}*/
</style>
<cfform>
<cfgrid format="html" name="data2" pagesize=11 width="970"
stripeRows=true stripeRowColor="DCDCDC"
bind="cfc:getTree.getData({cfgridpage},{cfgridpagesize},
{cfgridsortcolumn},{cfgridsortdirection},'#form.id#')"
selectmode="edit" delete="yes"
onchange="cfc:getTree.editData({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfquery name="colname" datasource="credit_db">
select column_name
from information_schema.columns
where table_name = 'credit'
and table_schema = 'credit_db'
</cfquery>
<cfgridcolumn name="date" display=true header="Month" width="70"/>
<cfgridcolumn name="id" display=true header="ID" width="60"/>
<cfgridcolumn name="subid" display=true header="Sub ID" width="70"/>
<cfgridcolumn name="name" display=true header="Name" width="200"/>
<cfloop index="i" from="10" to="#colname.recordcount#">
<cfgridcolumn name="#colname.column_name[i]#" display=true
dataalign="right" header="#colname.column_name[i]#" width="80" />
</cfloop>
</cfgrid>
</cfform>
<cfquery name="colnamecrd" datasource="credit_db">
select column_name
from information_schema.columns
where table_name = 'credit_ongap'
and table_schema = 'credit_db'
</cfquery>
<cfquery name="get_onDB" datasource="credit_db">
select date_format(date,'%Y-%m-%d') as date,name
<cfloop index="j" from="5" to="#colnamecrd.recordcount#">
,#colnamecrd.column_name[j]#
</cfloop>
from credit_ongap
where date = '#form.date#'
</cfquery>
<cfquery name="get_ofDB" datasource="credit_db">
select date_format(date,'%Y-%m-%d') as date,name
<cfloop index="j" from="5" to="#colnamecrd.recordcount#">
,#colnamecrd.column_name[j]#
</cfloop>
from credit_ofgap
where date = '#form.date#'
</cfquery>
<cfquery name="get_grdDB" datasource="credit_db">
select date_format(date,'%Y-%m-%d') as date,name
<cfloop index="j" from="5" to="#colnamecrd.recordcount#">
,#colnamecrd.column_name[j]#
</cfloop>
from credit_grdgap
where date = '#form.date#'
</cfquery>
<cfform name="onDB_Grid">
<cfgrid name="ongrid" query="get_onDB" stripeRows=true
stripeRowColor="DCDCDC" format="html" width="970" >
<cfgridcolumn name="date" header="Month" display=true width="70">
<cfgridcolumn name="name" header="Name" display=true width="330">
<cfquery name="colname_onDB" datasource="credit_db">
select column_name
from information_schema.columns
where table_name = 'credit_ongap'
and table_schema = 'credit_db'
</cfquery>
<cfloop index="i" from="5" to="#colname_onDB.recordcount#">
<cfgridcolumn name="#colname_onDB.column_name[i]#"
header="#colname_onDB.column_name[i]#"
dataalign="right" display=true width="80">
</cfloop>
</cfgrid>
<p></p>
<cfgrid name="ofgrid" query="get_ofDB" stripeRows=true
stripeRowColor="DCDCDC" format="html" width="970">
<cfgridcolumn name="date" header="Month" display="yes" width="70">
<cfgridcolumn name="name" header="Name" dataalign="right" display="yes" width="330">
<cfquery name="colname_ofDB" datasource="credit_db">
select column_name
from information_schema.columns
where table_name = 'credit_ofgap'
and table_schema = 'credit_db'
</cfquery>
<cfloop index="i" from="5" to="#colname_ofDB.recordcount#">
<cfgridcolumn name="#colname_ofDB.column_name[i]#" header="#colname_ofDB.column_name[i]#"
dataalign="right" display="yes" width="80">
</cfloop>
</cfgrid>
<p></p>
<cfgrid name="grd_grid" query="credit_grdgap" stripeRows=true
stripeRowColor="DCDCDC" format="html" width="970">
<cfgridcolumn name="date" header="Month" display="yes" width="70">
<cfgridcolumn name="posnm" header="Name" display="yes" width="330">
<cfquery name="colname_grdDB" datasource="credit_db">
select column_name
from information_schema.columns
where table_name = 'credit_grdgap'
and table_schema = 'credit_db'
</cfquery>
<cfloop index="i" from="5" to="#colname_grdDB.recordcount#">
<cfgridcolumn name="#colname_grdDB.column_name[i]#" header="#colname_grdDB.column_name[i]#"
dataalign="right" display="yes" width="80">
</cfloop>
</cfgrid>
</cfform>
Mar 3, 2010 at 7:20 PM Note that CF9 updated to ext 3. To get the cfgrid to wrap text in CF9 you need to apply the white-space: normal to .x-grid3-cell-inner (did not test all browsers!). You can find the full file at CFIDE\scripts\ajax\ext\resources\css\ext-all.css. It notes in comments some of the bugs in the current version that can save hair-pulling and hours of googling
Jun 21, 2010 at 9:45 AM Did anybody resolved issue about aligning columns when multiple cfgrid exists on the same page?
Beside that, I have another problem...
Although head topic works for me on normal cfm page on CF9 (when added ".x-grid3-cell-inner {white-space:normal;}") it doesn't work on page that is displayed in cfwindow.
I have cflayout type="tab" displayed in cfwindow and cfgrids on two cflayoutarea, but aligning does not work at all, even if I have only one cfgrid. I have tried to put styling in main cfm file but it did not work either.
Any ideas?
Jun 25, 2010 at 9:32 AM Hi there!
I have managed to align columns in multiple cfgrids on one page using following code:
<style type="text/css">
#Grid1 .x-grid3-hd-3 {text-align:right;}
#Grid1 .x-grid3-col-3 {text-align:right;}
#Grid2 .x-grid3-hd-5 {text-align:right;}
#Grid2 .x-grid3-col-5 {text-align:right;}
#Grid2 .x-grid3-hd-6 {text-align:center;}
#Grid2 .x-grid3-col-6 {text-align:center;}
</style>
By putting cfgrid inside <div> with specified id I managed to apply particular style:
<div id="Grid2">
<cfigrid>
</cfgrid>
</div>
It works even on cfgrid displayed in cfwindow (at least in FireFox)!
BUT, the problem is that columns are aligned only when cfwindow is opened for the first time (or after main page is refreshed)?!?!!?
If I close cfwindow and open it again, columns in cfgrid are not aligned!
Please help!!!
Aug 24, 2010 at 4:05 PM Thank you so much for this tip. I am working on an accounting application and being able to align numbers to the right is absolutely essential. I would have had to have rewritten my code entirely if this hadn't worked.
BTW - I found that in CF9 the class is named x-grid3 and so styles would be .x-grid3-col{text-align:right}; etc