Quick and easy column alignment for CFGRID

ColdFusion , Web Development , Ajax Add comments

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>

17 responses to “Quick and easy column alignment for CFGRID”

  1. Kate Juliff Says:
    Great tip! Very helpful.
  2. andrew lorien Says:
    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%}
  3. ALittleSlow Says:
    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;}
  4. PJ Says:
    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!!
  5. knk Says:
    THANKS. Works Great!
  6. Mitch Says:
    Gold, cheers mate
  7. Bob R Says:
    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!
  8. jasbir Says:
    Thanks. Works like a charm.
  9. Frederic Vandaele Says:
    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 ?
  10. CCTV system Says:
    Nice post I Like your site very well and continue to do so. I have bookmarked your site.
  11. Serge Rappaillz Says:
    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
  12. Lady Says:
    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
  13. Michael Sprague Says:
    @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>
  14. Lady Says:
    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
  15. Michael Sprague Says:
    @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
  16. Lady Says:
    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>
  17. spitcher Says:
    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

Leave a Reply

Leave this field empty:



Powered by Mango Blog. Design and Icons by N.Design Studio