The Latest...

Playing with <cfgrid>

Posted: February 16, 2013 in Cars & Driving

Now that our website redesign at work is nearing completion, I've started exploring some of the tags and functions in ColdFusion that I haven't ever gotten around to using.  One in particular is <cfgrid>.  This basically works to build a table straight from a database query, but it gives you the ability to do inline editing, which is pretty slick.  It also seems like it might cut down on the amount of code used.

For example, consider this code:

<cfquery name="bikelist" datasource="mydsn">
SELECT    bike_id
        , bike_type
        , bike_brand
        , bike_name
FROM bicycles
</cfquery>
<cfform name="biketable" action="bikes.cfm">
<cfgrid name="bikes" query="bikelist" colheaderbold="yes" format="html" selectmode="edit">
   <cfgridcolumn name="bike_id" display="no">
   <cfgridcolumn name="bike_type" header="Bike Type" select="yes" width="100" bold="no">
   <cfgridcolumn name="bike_brand" header="Bike Brand" select="yes" width="100" bold="no">
   <cfgridcolumn name="bike_name" header="Bike Name" select="yes" width="100" bold="no">
</cfgrid>
<cfinput type="submit" name="gridEntered" value="Submit" />
</cfform>

This builds a simple 3-column table, but each cell can be edited by double-clicking on it.  Then on the processing page, you can have this:

<cfif StructKeyExists(FORM,"gridEntered")>
    <cfgridupdate grid="bikes" dataSource="mydsn" keyonly="true" tableName="bicycles">
</cfif>

Normally here we'd have an INSERT or UPDATE statement, but instead we just have this cool tag that does all the work. This isn't of course something I'd use on a public website, but for an admin page inside an application, it could make things go a whole lot quicker, especially if you had a ton of updates to do on a large table.

So far the only drawback seems to be when you have a lot of rows, in which case you get horizontal scrolling, but I suppose that could be worse.  Another unfortunate feature is that all the widths seem to be in pixels, with no way of specifying % or EM.

That said, I still think it's worth some fiddling to see what use I can put to it, especially if I can apply some CSS styles to it.  That would be pretty trick!

Add Comment




Click to reload a new image.

< Back to blog