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.
* 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:
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:
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.