Ask a Jedi: Problem with CFGRID and Edit Action

Patrice asks:

This ajax cfgrid lets you enter a percentage, then updates the database. I have to pass two parameters to my update query, WORKORDER and DIVISION_NO. I need to pass the DIVISION_NO that is on the same row as the percentage entered. My problem is that after entering the percent, the update fires off, but with the DIVISION_NO from what ever row your cursor ends up on. Any help would be appreciated. Thanks!

This was a subtle error on her part. Let’s look at her grid (which I modified a bit to work in my environment) to see what went wrong.

<cfset variables.workorder = 99>

<cfform name=”form01”> <cfinput type=”Hidden” name=”WORKORDER” value=”#variables.WORKORDER#”> <cfinput type=”hidden” name=”DIVISION_NO” bind=”{grid01.DIVISION_NO}” bindonload=”Yes”>

<cfgrid format=”html” name=”grid01” pagesize=26 selectonload=”False” stripeRows=true stripeRowColor=”##c0c0c0” colheaderbold=”Yes” bind=”cfc:test.getTaskorderDivision({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{WORKORDER})” delete=”yes” selectmode=”edit” onchange=”cfc:test.editData({cfgridaction},{cfgridrow},{cfgridchanged},{WORKORDER},{DIVISION_NO})”>

<cfgridcolumn name=”DIVISION_NO” display=true header=”Division” width=”60” select=”no”/> <cfgridcolumn name=”DIV_NAME” display=true header=”Division Name” width=”180” select=”no”/> <cfgridcolumn name=”PERCENT” display=true header=”Percent” width=”60”/> </cfgrid>

</cfform> </code>

Focus in on the onchange action. Note that it’s going to call my test CFC, editData method, and pass four arguments: cfgridaction, cfgridrow, cfgridchanged, WORKORDER, DIVISION_NO. Believe it or not, as much as I had played with the new CFGRID in CF8, I had yet to try an edit action with it. I was surprised how easy it was to set up. But I did immediately see the issue when I examined the post in Firebug. (And yes, I’m going to mention Firebug again. 9 out of 10 problems sent to me would be fixed if people would use Firebug to help flesh out the issues. Even if your organization is an IE only shop, you need to install Firefox/Firebug on your development machine. Please!)

When I edited the percent column, I saw the following POST data sent:

gridaction=U - This means update, which makes sense. It was an edit event after all.

gridrow=
division_no: 2
div_name: div 2
percent: 2

This represents the row you modified. Note the right division is there. (I had edited the percent value in the second row.)

gridrowchanged:
percent: 20

This represents what you changed. I had changed percent from 2 to 20.

workorder: 99
The hard coded work order. Well, hard coded for me test. Her code had it as a variable.

do: 1

This is what you are seeing wrong, but consider that your hidden form field, division_no, is bound to the grid. So this is what happens. I was on row 2. I edited, then clicked row 1. At that point 2 things happened. An edit event was raised. That edit event was ALSO bound to the hidden field, and THAT was bound to the grid and gets the CURRENT value. Since I had clicked on row 1, it shows row 1 value.

So the fix here was to simply not bother passing the division number value at all. Since the entire row is sent in the post, you can get all the data from the row that was modified.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. 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 https://www.raymondcamden.com

Comments