Quick and easy column alignment for CFGRID

Ajax , ColdFusion , Web Development 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>

20 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
  18. Nenad P Says:
    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?
  19. Nenad P Says:
    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!!!
  20. hmc1411 Says:
    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

Leave a Reply

Leave this field empty:



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