Adding an ADD button for cfgrid

This post is more than 2 years old.

Here is a question forwarded to me from Ben Forta. He thought I could take a stab at it so here is my answer.

I am putting a query result set into afrom a cfc bind statement (which works with no problem). What I want to be able to do is have one grid column with an "ADD" button in it. When the button/cell is clicked it invokes another function that writes some data to a database. Everything I have read only addresses the edit/delete mode of the grid data itself. I want to "click" the item and have it add to another list/container/database.

This is something I kind of touched on before. When you pass a query to a cfgrid, you can include HTML in the query data. This HTML will render in the grid. So consider the following code. <cfquery name="entries" datasource="cfartgallery" maxrows="12"> select * from art </cfquery>

<cfset queryAddColumn(entries, "add", arrayNew(1))>

<cfloop query="entries"> <cfset querySetCell(entries, "add", "<input value='Add' type='button' onclick='javascript:testit(#artid#)'>", currentrow)> </cfloop>

I took a simple query and added a new column, "add". I looped over the query and for each row, added an HTML button that calls a JavaScript function and passes the primary key of the row.

Just to ensure it works, here is the rest of the code:

<script> function testit(x) { alert(x);} </script>

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

<cfgridcolumn name="artname" header="Name"> <cfgridcolumn name="price" header="Price"> <cfgridcolumn name="add" header="Add"> </cfgrid> </cfform>

If you run this in your browser, you can click on any button and see the JavaScript called. So that's the difficult part really. If you want to pass this 'add action' to the server, you can use cfajaxproxy. I assume this part is easy, if folks want to see that part of the code, I can work that up as well.

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