Interface Widgets: Datagrid (part I)

Whether you use the web for shopping or banking, blogging or content management, every once in a while you stumble across an interface widget that makes you wonder: “how the heck do they do it?”

One of those widgets is the datagrid that looks and behaves like your datagrid /spreadsheet in a desktop application: scrollable with static headers, selectable rows and editable cells, sortable columns and other “desktop-like” features.
In this and the following articles of the Interface Widgets series you will learn how to create a datagrid like this in Dreamweaver from scratch.

- OR -


Although you can use some of the described techniques to “convert” a regular static HTML table into a “datagrid”, some of the advanced features, such as sorting, updating and deleting records within the datagrid, require dynamic content. The back end functionality in this article was implemented using PHP/ MySQL server model. It doesn’t mean however that you can’t use a different one - most of the techniques involved are client-side (CSS, JavaScript)and those that aren’t can be easily adopted for any other server model.

For the purpose of the article we need a working database connection.



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


Be the first to write a review

You must me logged in to write a review.