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