Back to Top
The nuts and bolts for
Creative web development

Editable Spry Table

In this article we will talk about creating "editable Spry Table" functionality where user can double-click directly inside a table cell and edit it just like an Excel spreadsheet. Clicking away will return the cell back to the "read-only" state and save the change to the database. In other words the change will be saved as soon as it has been made. You will learn how to build this functionality in Dreamweaver using standard Update Record Server Behavior and Spry Server Action object from Spry Data Utilities Toolkit.

To start you will need an HTML table with a row inside a Spry Repeat region i.e. a "Spry Table".
The data which populates the table should be coming from a database and must be generated by the Recordset to XML Server Behavior.

The functionality described in this article has been tested with IE7, IE8, Firefox 3.63, Chrome 2 and Safari 5.02.

Adding Update Record Server Behavior

1.At this point your page should already contain both the Recordset which gets the records for your table and the Recordset to XML Server Behavior to translate this Recordset to XML format (so they can be displayed in your Spry region).

Next you will need a Recordset selecting a single record (based, for instance, on a record ID).
This would be the Recordset which could get a single row of data that is about to be updated. In this example UserAccount_rs gets a user account based on the passed USER_ID form variable.

2.Time to add the "update" fields and the server code. Place your cursor somewhere outside your Spry Region and click Record Update Form Wizard button located on the Data tab of the Insert bar to run the Wizard.


In the Record Update Form Wizard dialog make sure to include ALL table columns.
Clicking OK will insert the HTML form with all the fields. Dreamweaver will also add the server-side code required for updating the record.

Form adjustments

Now let's make some adjustments to the form.

1.We need to tie the form to your Spry Region. To do so open your Attributes panel, select the form in the Design view and set the spry:detailregion parameter to the name of your Spry Data Set.

2.At the moment every field on your update form has its value set to the corresponding value from your UserAcount_rs Recordset. We need to change that so that the values point to the Spry Data Set values instead.
Select every field (including your hidden USER_ID field) and using Properties Inspector change its value to the corresponding value from your Spry Data Set.

For example, change <?php echo $row_UserAcount_rs['Email']; ?> to {Email}, <?php echo $row_UserAcount_rs['First_Name']; ?> to {First_Name}, etc. You can also use the dynamic value button (which looks like a lightning bolt - right beside the value field in the Properties Inspector) to pick the correct values from the Spry Data set.

Lastly you need to make sure that when a row in your Spry Table is selected the form fields change their values to those in the selected row. Switch to the Code view and add spry:setrow="ds1" to the <tr> tag containing values from the Spry Data Set (where ds1 is the name of your Data set).

Now if you test the page in the browser you will notice that the values of the form fields change every time you select a row in your Spry Table. If you were to change the values now and submit the form the page would refresh and the selected record would be updated in the database. That's nice, but not exactly what we are aiming for. Since we are building an AJAX application we want no page refreshes. It's easy to accomplish with Spry Server Action object.

Alex July

Alex JulyAlex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Share this Article