Interface Widgets: Datagrid (part II)

In this iteration of the series we will complete our datagrid widget which we started on in Interface Widgets: Datagrid (part I). Today we will cover a few more topics: columns sorting, editing records directly in the datagrid and printing the datagrid scrollable content.

Sortable columns

First of all let’s decide which columns will be sortable and by which one the datagrid will be sorted by default when the page first loads.

To me it made the most sense to sort the columns by Title, Price and Genre. I also decided by default the datagrid should be sorted by Title. In order to show to the user the difference between the non-sortable and sortable columns we want to make the latter look more like buttons. I created a separate CSS class and applied it to all sortable columns.

.column_header_sortable{
border-top: 2px solid ThreedHighlight;
border-left: 2px solid ThreedHighlight;
border-bottom: 2px solid ThreedShadow;
border-right: 2px solid ThreedShadow;
color: ButtonText;
font-weight: bold;
padding:3px;
cursor: default;

To visually indicate the current sort order (ascending or descending) we need two images – for the “up” and “down” arrows. You can use the images below or create your own:

Down arrow:
Up arrow:

If you open those images with your favourite image-editing software you will see that both of them are semi-transparent gifs. Using transparent areas creates the desired 3D/ see-through effect and allows the arrows to “take on” the user’s system colour.
.

Place both images in each sortable header cell next to the column title.

Overview

Using Properties inspector set the align attribute of each image to “Absolute Middle”

In the next step we will need to modify our Recordset to accommodate the sorting feature:

1. Double click the Recordset name in the Server Behaviors panel to open the dialog box.

2. Click the “+” button in the variables section to add a new variable.
Enter “SortColumn” for the Name, “TITLE” for the Default value (remember we want the datagrid sorted by TITLE when the page first loads) and “$_GET['SortColumn']” for the Runtime value:

This will sort the datagrid by “TITLE” unless the user selects a different column by submitting a form with SortColumn field set to a value other than “TITLE”.
Click OK to insert the variable.

Create another variable with the following parameters:

Name: SortOrder
Default value: ASC
Runtime value: $_GET[‘SortOrder’]

This will set the sort order to ascending unless the user changes it by submitting a form with SortOrder field set to “DESC” (descending).

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.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.