ColdFusion 9 and how to change the colour of the row in a CFGrid

Tags: ColdFusion 8, Coldfusion, ColdFusion 9

A user asked the question on a mailing list today on how would you go about changing the colour of a grid row, if the date is less than 2 weeks away.

Seeing as this is something that is not really mentioned much anywhere, I thought I would write a quick blog to show how.

The first thing that we need to understand is that anything in ExtJS, can be overridden to make changes in behaviour. With that in mind we can now look at the Grid Object and see that inside the view one can provide custom row styles.

getRowClass( Record record, Number index, Object rowParams, Store store ) : String
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters t...
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class'). Example usage:

Now that we know this bit of information all we know need to do is provide that in our code, and it would look something like this.

<cfsavecontent variable="jsHeaderScript">
   <style>
      .dateImportant {
         background-border: 1px solid navy;
      }
   </style>
   <script>
      testGridRender = function() {
         Ext.override( Ext.grid.GridView , {
            getRowClass: function(record, rowIndex, rp, ds){
               dt = new Date(record.get('POSTED'));
               if(dt.between(new Date(), new Date().add( Date.DAY, 14))) {
                  return 'dateImportant';
               } else {
                  return '';
               }
            }
         });
      }

   </script>
</cfsavecontent>
<cfhtmlhead text="#jsHeaderScript#" />
<cfset ajaxOnLoad("testGridRender")>

As you can see the important thing that we need to do here, is run the code after all the ExtJS stuff has loaded. Once this has loaded we can then apply changes to any part of ExtJS, in this example we are adding the getRowClass to the GridView.

Inside this we are using the passed record, to then get the column POSTED. This column is a column that is in my Grid called you guest it Posted. And as this is a date field, I then apply the calculation to see if the Date falls in the supplied between dates. In which is if it is we then return the class that we wish to apply to the row.

As you can see this is very straight forward, and it should even work under ColdFusion 8 as well.


TweetBacks

ColdFusion 9 and how to change the colour of the row in a CFGrid - http://cfbloggers.org/?c=44912 Oct 6, 2010

Comments (Moderated) | Add Comment

  • Anthony Doherty's Gravatar Hi Andrew - thanks for creating this blog.

    I have applied your code and changed the POSTED to SUBMISSION_DATE as this is what my column is called in the grid but nothing happens on the grid and i get no errors.

    Is there anything else im missing?

    Thanks
    # Posted By Anthony Doherty | 10/6/10 3:07 AM
  • Andrew Scott's Gravatar Not from the top of my head, but what you can do if you use FireFox and fireBug. You can do a console.log(record) which if you have the console enabled will show the actual column names.
    # Posted By Andrew Scott | 10/6/10 3:17 AM
  • Anthony Doherty's Gravatar Hi Andrew, Still cant get this to work - Could you show me a basic grid with it working and i can try and figure out where im going wrong.

    Thanks.
    # Posted By Anthony Doherty | 10/11/10 9:53 AM
  • Andrew Scott's Gravatar Is your code accessible via a webpage externally, I can run the fireBug over your code to see why it might no be happening.

    I think I might know what the problem is, but I will need to see your page built, and all the things that fireBug shows me to tell for sure.
    # Posted By Andrew Scott | 10/12/10 12:49 AM
  • Anthony Doherty's Gravatar Hi Andrew, I got it sorted - i was missing a " from the script - when i added that it worked great.

    Is there a way to make the text bold on that row as well as change the colour?  i tired adding in "font-weight:bold;" to the date-important style but it didnt make any change.

    Thanks
    # Posted By Anthony Doherty | 10/12/10 6:59 AM
  • Andrew Scott's Gravatar Anthony that is good news, as for the weight of the font. You might want to look into the column rendering, I do have an example of that on my blog somewhere.

    This will also allow youi to do different rendering for each column, rather than by row.
    # Posted By Andrew Scott | 10/12/10 7:36 AM
  • Jack Kerwin's Gravatar Hi Andrew!

    This code looks very useful.  I was hoping to use it to disable the boolean checkbox in the cfgrid (CF9) under certain data driven circumstances.  Could you let me know if this is possible?

    Thanks!

    Jack
    # Posted By Jack Kerwin | 10/21/10 5:19 PM
  • Andrew Scott's Gravatar How are you putting the checl box in the column?

    If you wish to send me a sample privately I will be more than happy to have a look at it, but there are many factors to this and it will depend on what you are doing and what you are looking at wanting to achieve.
    # Posted By Andrew Scott | 10/22/10 9:56 AM
  • Jack Kerwin's Gravatar I tried to send this via your contact page but received an error.

    Thanks for the invite to contact you Andrew.

    I am developing a 'buyers resource guide.'  One of the requests is for a 'Request for Proposal' checkbox where the user can select several vendors and, in one click, send out requests for RFPs. 

    In order to 'trick' the cfgrid into giving me a checkbox (bit field), I did an outer join of the vendor and another table which used the CFID and CFTOKEN to track which checkboxes the user clicked.  I did this because when I used the paging options, the cfgrid would not keep a box checked if the user moved to a 2nd page and back.

    The curve ball thrown at me is that the RFP option is a PAID option for the vendors.  Therefore, not all rows in the CFGrid are supposed to have a checkbox.  I don't care if its not displayed or disabled but it is a requirement.  If it isn't possible, I'll have to ditch the cfgrid.

    Ideally, I'd like to reference a bit field in the vendor table which tells the cfgrid whether or not to have the checkbox active.  I was thinking since you handled the coloring on a row basis, it was potentially possible to handle the enabled property of the checkbox?

    Thanks so much for your time!

    Jack
    # Posted By Jack Kerwin | 10/25/10 1:44 PM
  • Andrew Scott's Gravatar It should be possible, can you send me an email at andrews @ this domain.

    Also what version of ColdFusion are you using, if you want to be a tester to a new set of tags I am developing let me know. It is ColdFusion 9 only though, but it also uses the latest ExtJS under the hood and is simpler and better to use than the way ColdFusion approached this.</p>
    # Posted By Andrew Scott | 10/26/10 7:14 PM

Comments (Moderated) | Add Comment