Making CFGRID Layout Vertically

I love CFGRID's functionality right out of the box - it instantly gives you the ability to sort data ascending and descending, stripe alternating rows, insert, edit and delete data inline and more.  It's a really useful piece of EXT code which takes just a little time to master (probably wouldn't say I've mastered it, but I'm decent enough to make it work properly most the time ;).  I recently ran into a case for using CFGRID, but I wanted it to layout vertically rather than horizontally.

The application I was working on dealt with product options, and the client needed to edit a single record at a time.  With CFGRID, you can easily create an editable grid, but it lays out horizontally which causes the page to scroll if you have a lot of columns for each record.  This was the case for this particular project, so realizing that it wasn't going to work, I considered alternatives.  Using jQGrid was a viable option - probably - but I'd still end with too many columns.  And although I do use and love jQuery, I generally try to avoid mixing JavaScript libraries if possible.  I also considered using a traditional HTML table within a form and using label tags and text inputs.  That didn't feel right either though, because I wanted to keep some of the same elements throughout the site.  I also wanted the AJAX functionality.  I did some searching through the ColdFusion documentation and found that getting a row (single record) to lay out vertically was actually a pretty trivial task.

* For the following examples I used the cfartgallery database included with ColdFusion

Given the following query:



<cfquery datasource="cfartgallery" name="qArtistDetails">
SELECT   FIRSTNAME,
         LASTNAME,
         ADDRESS,
         CITY,
         STATE,
         POSTALCODE,
         EMAIL,
         PHONE,
         FAX,
         THEPASSWORD
FROM     ARTISTS
WHERE    ARTISTID = 4
</cfquery>


Normally a CFGRID would look like this:

A horizontally-layed-out CFGRID

The code to create this grid is pretty straightforward.  All we have to do is add the query attribute to the cfgrid tag.  In this example I also used cfgridcolumn tags to speciy the exact columns to use because I wanted to add the headermenu="false" attribute to turn the header menus off, but it would have worked even without including them.  Here's the ColdFusion code:



<cfform>
<cfgrid  name="artGridHorizontal"
         format="html"
         query="qArtistDetails"
         selectmode="row">

         <cfgridcolumn  headermenu="false"
                        name="FIRSTNAME">
         <cfgridcolumn  headermenu="false"
                        name="LASTNAME">
         <cfgridcolumn  headermenu="false"
                        name="ADDRESS">
         <cfgridcolumn  headermenu="false"
                        name="CITY">
         <cfgridcolumn  headermenu="false"
                        name="STATE">
         <cfgridcolumn  headermenu="false"
                        name="POSTALCODE">
         <cfgridcolumn  headermenu="false"
                        name="EMAIL">
         <cfgridcolumn  headermenu="false"
                        name="PHONE">
         <cfgridcolumn  headermenu="false"
                        name="FAX">
         <cfgridcolumn  headermenu="false"
                        name="THEPASSWORD">

</cfgrid>
</cfform>


Here is how I wanted it to look:

vertically-layed-out CFGRID

The ColdFusion code below is the answer, and is only slightly different.  We do not want to add the query attribute to the CFGRID tag here - it is added when we specify the rowdata values instead:



<cfform> 
<cfgrid  format="html"
         name="artGridVertical"
         selectmode="row">

        <cfgridcolumn   header="Column"
                        headermenu="false"
                        name="Field"
                        width="200"> 
        <cfgridcolumn   header="Value"
                        headermenu="false"
                        name="Value"
                        width="200"> 

        <cfoutput query="qArtistDetails"> 
            <cfgridrow  data="FIRSTNAME,#FIRSTNAME#">
            <cfgridrow  data="LASTNAME,#LASTNAME#">
            <cfgridrow  data="ADDRESS,#ADDRESS#">
            <cfgridrow  data="CITY,#CITY#">
            <cfgridrow  data="STATE,#STATE#">
            <cfgridrow  data="POSTALCODE,#POSTALCODE#">
            <cfgridrow  data="EMAIL,#EMAIL#">
            <cfgridrow  data="PHONE,#PHONE#">
            <cfgridrow  data="FAX,#FAX#">
            <cfgridrow  data="THEPASSWORD,#THEPASSWORD#">
        </cfoutput> 

</cfgrid>
</cfform>


What we've done here is to set up a grid with two columns: "Column" and "Value".  Below that is where we loop through our query data, and we do it by specifying a row (with the cfgridrow tag), naming the query column, and then adding the column value.  Each column you want to appear must have its own cfgridrow tag and data.

Although I didn't show it here, the cool part about this is that you can also use CFCs and binding to make all the data in the grid editable inline.  To me, it's a far cleaner, more professional-looking solution than using regular HTML forms for updating things like contact information.

If you're new to ColdFusion, it's probably important to note that CFGRID is part of the EXT JavaScript Library.  ColdFusion makes it easy for you to use EXT by providing the tag-based code to help you implement its functionality quickly.  The Sencha website (Sencha authored the EXT JavaScript Library) has some great examples of the grid and other elements.  For more advanced features and functionality you'll need to learn some JavaScript if you don't already have that in your bag of tricks.

Click here for an example of CFGRID in action.

  1. CFFusionDev

    #1 by CFFusionDev - July 20, 2013 at 11:15 PM

    Hi, this is awesome. Is it possible that I can set up a filter/search textbox and search for a column like in this case lets say if typed phone, then phone row is highlighted and so on?

    Is that doable?
(will not be published)
Leave this field empty: