Ask a Jedi: Add an edit button to a ColdFusion 8 Ajax Grid

This post is more than 2 years old.

Kyle asks:

In my application I currently have a table that is created from a cfoutput query, and for each row I have an edit button that links to an edit page passing an id as a url variable. I would like to change this table to a coldfusion 8 cfgrid (html format), but I'm not seeing how you can do this in html format (from what U've read, it can only be done in flash format). Have you come across a way to do this in html?

This is something I've mentioned before, but don't forget you can include arbitrary HTML in your data passed to the grid. I'm not sure how far you can push it, but consider this sample: <cfquery name="entries" datasource="blogdev"> select * from tblblogentries limit 0,10 </cfquery>

<cfset queryAddColumn(entries,"editlink","varchar",arrayNew(1))>

<cfloop query="entries"> <cfsavecontent variable="edittext"> <form action="test4.cfm" method="post"> <cfoutput><input type="hidden" name="id" value="#id#"></cfoutput> <input type="submit" value="Edit"> </form> </cfsavecontent> <cfset querySetCell(entries, "editlink", edittext, currentRow)> </cfloop>

<cfform name="test"> <cfgrid autowidth="true" name="entries" format="html" query="entries" width="600"> <cfgridcolumn name="id" display="false"> <cfgridcolumn name="body" display="false">

<cfgridcolumn name="title" header="Title"> <cfgridcolumn name="posted" header="Posted"> <cfgridcolumn name="editlink" header=""> </cfgrid> </cfform>

<cfdump var="#form#">

I begin by doing a normal query. This grid isn't Ajax based, but that doesn't really matter. Note that I add a custom column named editlink. I then loop over the query. For each row, I create a form that simply has a hidden ID variable and a submit button. I then take this form (using the handy cfsavecontent tag) and store it into the query.

I added the query column to the display, and that was it. I added a dump to the page so I could confirm the right ID was being passed. That's it really. Here is how the grid now renders:

Again, I'm not quite sure this is "proper" usage of the grid, but it works!

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA