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 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.