Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion, Machine Learning

ColdFusion: Article

ColdFusion AJAX Tutorial 6: Editable Data Grids

Like the previous incarnations of, the new AJAX enabled HTML grid allows data to be updated right within the grid

Ben Forta's Blog

Previously we looked at the new ColdFusion 8 data grid and how to populate that control using asynchronous calls back to a ColdFusion Component. In that example the CFC contained a single method that returned a page of data as requested by the data grid.

Like the previous incarnations of <CFGRID>, the new Ajax enabled HTML grid allows data to be updated right within the grid. When the <CFGRID> is used in edit mode, column values may be edited as needed, and rows may be deleted. Unfortunately, the current implementation of the HTML <CFGRID> does not support inserting new rows. This is a pretty serious limitation, and one that we'll hopefully address in the future - for now you'll need to use another form to add new rows.

You will recall that <CFGRID> requests data as needed by making calls to a CFC method specified in the bind attribute. To process edits a second CFC method is needed, and it must be passed to the onchange attribute. Here is a modified <CFGRID> that supports data editing:

<cfwindow initshow="true" center="true"
         width="430" height="340" title="Artists">


<cfform>
   <cfgrid name="artists"
         format="html"
         pagesize="10"
         striperows="yes"
         selectmode="edit"
         delete="yes"
         bind="cfc:artists.getArtists({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})"

         onchange="cfc:artists.editArtist({cfgridaction},
                                 {cfgridrow},
                                 {cfgridchanged})"
>

      <cfgridcolumn name="is" display="false" />
      <cfgridcolumn name="lastname" header="Last Name" width="100"/>
      <cfgridcolumn name="firstname" header="First Name" width="100"/>
      <cfgridcolumn name="email" header="E-Mail" width="200"/>
   </cfgrid>
</cfform>

</cfwindow>

There are three changes in this <CFGRID> (compared to the grid created previously). First of all, selectmode="edit" puts the data grid in edit mode. This allows editing, but not deleting. To allow rows to be deleted, delete="yes" is also specified. And finally, a CFC method is specified in the onchange attribute. When invoked (upon an edit or a delete) three arguments will be passed, the action (U for update or D for delete), the row being changed, and the changes (only populated for updates, and not for deletes).

The specified CFC has to accept these three arguments, and returns no data. Within the CFC you can use <CFQUERY> tags (or perform any other operations) to actually perform the updates. Here's an example:

<!--- Edit an artist --->
   <cffunction name="editArtist" access="remote">
      <cfargument name="gridaction" type="string" required="yes">
      <cfargument name="gridrow" type="struct" required="yes">
      <cfargument name="gridchanged" type="struct" required="yes">

      <!--- Local variables --->
      <cfset var colname="">
      <cfset var value="">

      <!--- Process gridaction --->
      <cfswitch expression="#ARGUMENTS.gridaction#">
         <!--- Process updates --->
         <cfcase value="U">
            <!--- Get column name and value --->
            <cfset colname=StructKeyList(ARGUMENTS.gridchanged)>
            <cfset value=ARGUMENTS.gridchanged[colname]>
            <!--- Perform actual update --->
            <cfquery datasource="#THIS.dsn#">
            UPDATE artists
            SET #colname# = '#value#'
            WHERE artistid = #ARGUMENTS.gridrow.artistid#
            </cfquery>
         </cfcase>
         <!--- Process deletes --->
         <cfcase value="D">
            <!--- Perform actual delete --->
            <cfquery datasource="#THIS.dsn#">
            DELETE FROM artists
            where artistid = #ARGUMENTS.gridrow.artistid#
            </cfquery>
         </cfcase>
      </cfswitch>
   </cffunction>

The code uses a <CFSWITCH> to process a gridaction of U (update) or D (delete). For updates, argument gridchanged will be a structure containing an element for each column changed, the element name is the column name and the element value is the new value. Each column is updated individually, if a user makes three edits to the same row in the data grid the this method will be called three times, once for each row. As such, for updates, gridchanged only ever contains a single element, and so the code extracts the column name and value and saves them to local variables. These variables are then used in a <CFQUERY> to perform the actual update, using the primary key in the passed row (ARGUMENTS.gridrow) for the SQL WHERE clause. Deletes are processed similarly, with only the primary key needed.

Here is the complete artists.cfc, with both the bind and onchange methods:

<cfcomponent output="false">


   <cfset THIS.dsn="cfartgallery">


   <!--- Get artists --->
   <cffunction name="getArtists" access="remote" returntype="struct">
      <cfargument name="page" type="numeric" required="yes">
      <cfargument name="pageSize" type="numeric" required="yes">
      <cfargument name="gridsortcolumn" type="string" required="no" default="">
      <cfargument name="gridsortdir" type="string" required="no" default="">

      <!--- Local variables --->
      <cfset var artists="">

      <!--- Get data --->
      <cfquery name="artists" datasource="#THIS.dsn#">
      SELECT artistid, lastname, firstname, email
      FROM artists
      <cfif ARGUMENTS.gridsortcolumn NEQ ""
         and ARGUMENTS.gridsortdir NEQ "">

         ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#
      </cfif>
      </cfquery>

      <!--- And return it as a grid structure --->
      <cfreturn QueryConvertForGrid(artists,
                     ARGUMENTS.page,
                     ARGUMENTS.pageSize)>

   </cffunction>


   <!--- Edit an artist --->
   <cffunction name="editArtist" access="remote">
      <cfargument name="gridaction" type="string" required="yes">
      <cfargument name="gridrow" type="struct" required="yes">
      <cfargument name="gridchanged" type="struct" required="yes">

      <!--- Local variables --->
      <cfset var colname="">
      <cfset var value="">

      <!--- Process gridaction --->
      <cfswitch expression="#ARGUMENTS.gridaction#">
         <!--- Process updates --->
         <cfcase value="U">
            <!--- Get column name and value --->
            <cfset colname=StructKeyList(ARGUMENTS.gridchanged)>
            <cfset value=ARGUMENTS.gridchanged[colname]>
            <!--- Perform actual update --->
            <cfquery datasource="#THIS.dsn#">
            UPDATE artists
            SET #colname# = '#value#'
            WHERE artistid = #ARGUMENTS.gridrow.artistid#
            </cfquery>
         </cfcase>
         <!--- Process deletes --->
         <cfcase value="D">
            <!--- Perform actual delete --->
            <cfquery datasource="#THIS.dsn#">
            DELETE FROM artists
            WHERE artistid = #ARGUMENTS.gridrow.artistid#
            </cfquery>
         </cfcase>
      </cfswitch>
   </cffunction>


</cfcomponent>

We'll look at additional <CFGRID> examples in the future.

Comments (0) | Trackbacks (0) | Print | Send | del.icio.us | Linking Blogs

More Stories By Ben Forta

Ben Forta is Adobe's Senior Technical Evangelist. In that capacity he spends a considerable amount of time talking and writing about Adobe products (with an emphasis on ColdFusion and Flex), and providing feedback to help shape the future direction of the products. By the way, if you are not yet a ColdFusion user, you should be. It is an incredible product, and is truly deserving of all the praise it has been receiving. In a prior life he was a ColdFusion customer (he wrote one of the first large high visibility web sites using the product) and was so impressed he ended up working for the company that created it (Allaire). Ben is also the author of books on ColdFusion, SQL, Windows 2000, JSP, WAP, Regular Expressions, and more. Before joining Adobe (well, Allaire actually, and then Macromedia and Allaire merged, and then Adobe bought Macromedia) he helped found a company called Car.com which provides automotive services (buy a car, sell a car, etc) over the Web. Car.com (including Stoneage) is one of the largest automotive web sites out there, was written entirely in ColdFusion, and is now owned by Auto-By-Tel.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Elad 03/04/08 03:07:49 AM EST

Sorry guy's, but as per past versions of Coldfusion, version 8 is too little to late. For the past 2 years I have used Ajax in its raw form with PHP and ASP.Net to web services and ASP.Net with Ajax.Net. CF 8 this version is lacking in major functionality. Why for example is the cfgrid the only way of calling a function when you make a change to the content?

CF AJAX News 06/25/07 10:33:07 PM EDT

Like the previous incarnations of, the new AJAX enabled HTML grid allows data to be updated right within the grid. When it is used in edit mode, column values may be edited as needed, and rows may be deleted. Unfortunately, the current implementation of the HTML does not support inserting new rows. This is a pretty serious limitation, and one that we'll hopefully address in the future - for now you'll need to use another form to add new rows.

IoT & Smart Cities Stories
If a machine can invent, does this mean the end of the patent system as we know it? The patent system, both in the US and Europe, allows companies to protect their inventions and helps foster innovation. However, Artificial Intelligence (AI) could be set to disrupt the patent system as we know it. This talk will examine how AI may change the patent landscape in the years to come. Furthermore, ways in which companies can best protect their AI related inventions will be examined from both a US and...
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of ...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
The Internet of Things will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform and how we integrate our thinking to solve complicated problems. In his session at 19th Cloud Expo, Craig Sproule, CEO of Metavine, demonstrated how to move beyond today's coding paradigm and sh...
What are the new priorities for the connected business? First: businesses need to think differently about the types of connections they will need to make – these span well beyond the traditional app to app into more modern forms of integration including SaaS integrations, mobile integrations, APIs, device integration and Big Data integration. It’s important these are unified together vs. doing them all piecemeal. Second, these types of connections need to be simple to design, adapt and configure...