Be the first to write a review
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.
Adding Spry Server Action object
Click Spry Server Action icon located on the Spry tab of the insert panel.
In the dialog select your update form from the Form dropdown, the Display progress indicator (if you are using one) and the name of your Spry Data set from the Refresh Spry data set dropdown to reload your Spry Table if you want your data to be fresh (for example if your Spry Table is sorted by the value in the edited column).
Click OK to insert the object.
Test your page now and you will notice that the refresh is
gone. Definitely a progress, but let's not stop at that!
We can now safely hide the form from the user.
Click the "+" button at the bottom of the CSS Styles panel to add a new declaration.
From the Selector Type dropdown pick "ID (applies to only one HTML element)" and from the Rule Definition "(This document only)".
Click "OK" and switch to the Block tab in the pop-up dialog. Select "none" from the Display dropdown. Your form will now be hidden.
Making editable cells
1.First of all we need to make sure that even if a cell in your
table contains no data it can still be clicked on and edited. To achieve that
we need to wrap the content of every cell you want to be editable inside a
<div> tag. Go ahead and select the content of the first cell, then click Insert
DIV tag button on the Layout tab
of the Insert bar.
In the dialog that will pop-up make sure "Wrap around selection" option is selected and enter "editable_field" in the Class menu.
Click New CSS Rule button to open the dialog for defining CSS properties for the class.
Click "OK" and enter 100% for the Width and 12px (or whatever your want the height of your cell to be) for the Height and click "OK" again:
//Update ONLY if the new value is different from the old one
Notice that "updateForm" in this script is the name of your update form - change it to your own value if needed.
The script contains two functions: editField() and updateField().
First one (editField()) will make the cell editable and will be triggered by user's onclick event.
The second function (updateField()) will set the value of the corresponding field inside our hidden update form to the text of the cell and trigger the form submission to update the record and reset the view. This will occur when user clicks away from the cell and ONLY if the new value is deferent from the old one.
Now select each "editable_field" div tag and use Behaviors panel and to add "editField(this)" (without quotes) to each div tag making sure onclick event is selected in event handler dropdown.
Behaviors panel in Dreamweaver CS3
that repeat the procedure and add "updateField(this,' field_name')"
(without quotes) to each of the div tags making sure onblur event
is selected in event handler dropdown. Instead of the field_name enter
the name of the corresponding update form field. Notice the single quotes
surrounding the field's name:
Behaviors panel in Dreamweaver CS4 and CS5
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.
You must me logged in to write a review.