We have a cfGrid setup that includes a delete button. The rest of the functionality of the grid, loading data from an uploaded spreadsheet and editing the data, all works fine. However, the delete button behaves very strangely. It does not remove the row, and it seems to undo all of the updates we have made to the grid.
Here are some snippets of the relevant portions of code:
<script>
<!--- This converts the query (which was generated by the XLS file) into a WDDX object, which can be easily edited by JS and easily serialized for submission to the processing cfm. --->
<cfwddx action="cfml2js" input="#xlsData#" topLevelVariable="xlsData">
<!--- Each time the grid is updated this JS function updates the WDDX object in memory. --->
function gridChange(cfgridaction, cfgridrow, cfgridchanged) {
for (var element in cfgridchanged) {
xlsData.setField(cfgridrow.CFGRIDROWINDEX-1, element, cfgridchanged[element])
}
}
<!--- Upon submission we serialize the WDDX object into a string, add it to a hidden form field, and then pass it to the processing template to be inserted into the database. --->
function storeArrayForSubmit() {
wddxSerializer = new WddxSerializer();
wddxPacket = wddxSerializer.serialize(xlsData);
document.getElementById('gridData').value = wddxPacket;
document.getElementById('updateForm').submit();
}
</script>
<!--- This form is only for the grid. We do not keep everything in the same form as we would then be double submitting data, once in the grid and once in the WDDX string. --->
<cfform action="">
<cfgrid name="thisGrid"
format="html"
query="xlsData"
title="Edit Uploaded Data"
striperows="yes"
selectmode="edit"
delete="yes"
onchange="javaScript:gridChange({cfgridaction},
{cfgridrow},
{cfgridchanged})">
<cfloop list="#gridColumns#" index="fieldName">
<cfgridcolumn name="#fieldName#" header="#fieldName#" width="200" select="Yes" />
</cfloop>
</cfgrid>
<p>
<input type="button" value="Save Changes" name="submit" onClick="storeArrayForSubmit();" />
</cfform>
<!--- This form actually submits the data to the action page --->
<form id="updateForm" action="manualUploadComplete.cfm" method="post">
<input type="hidden" id="uploadedFileName" name="uploadedFileName" value="#uploadedFileName#" />
<input type="hidden" id="table" name="table" value="#form.table#" />
<input type="hidden" id="columnList" name="columnList" value="#form.columnList#" />
<input type="hidden" id="tableColumnList" name="tableColumnList" value="#form.tableColumnList#" />
<input type="hidden" id="primaryKeyList" name="primaryKeyList" value="#form.primaryKeyList#" />
<input type="hidden" id="gridData" name="gridData" value="" />
</form>
There is no database involvement at this point. An xls file has been uploaded and read, that data is being displayed on screen for editing, and then we will submit everything at once to the next page which will do all the database inserts and updates.
When the delete button is pressed the row is deselected but not removed from the grid. All of the updates made in the grid revert back to when the grid first loaded. But the data in the wddx object retains the updates so the correct data is submitted to the action page.
