Create a great looking, interactive Ajax Grid in Dreamweaver within
minutes.Choose from predefined designs, add grid paging and inline
search. Select one of the many table formatting options to fit the
Grid perfectly in your site.
The grid loads extremely fast
due to Ajax technology that only loads the displayed data. Connect with
any datasource, whether it’s MySQL or MS SQL Server, using auto
generated ASP or PHP Code. Add interactive components to your Data Grid
such as 3D ImageFlow Gallery, Advanced Tooltips, Advanced Layer Popup or Flash MP3 Player.
Ajax Datagrid Manual
The Basics: Editing the Ajax DataGrid with the Property Inspector
Introduction
In this chapter we're going to edit the properties of the Ajax DataGrid using the property inspector of
Dreamweaver. Click on the preview of the Ajax DataGrid in the design view to display its properties. Below is
a screenshot of the property inspector and
a screenshot of the final result.
Editing the Basic options
Editing the Ajax DataGrid Properties
The Caption displays at the very top
of your table and is the first option that can be set in the Properties
Inspector. We'll leave it at Classic Cars.
ID sets the ID of the Ajax DataGrid. This entry field is useful when you use more than one Ajax DataGrid, that way the different galleries can be identified. We leave it to its default value.
The Style option lets you choose
between the Flexigrid (default) style and the Windows XP style.
We set it to the Windows XP style.
The following popup appears:
Press OK.
The Advanced button, right under the Style field opens up the Ajax DataGrid popup where you can edit all
settings that you have defined in the previous tutorial.
Height is
related to the height of the Ajax DataGrid when it is first loaded. We'll leave
it at 550 (pixels). Width sets the width of the Ajax DataGrid. Take
the padding and margins in the standard CSS into account when calculating how
many columns will fit in the grid. We'll leave the Height at 600 (pixels).
We don't set the Width to auto as we want the user to be able to resize the
grid manually.
Min. Height sets the minimal possible height of the table when resized manually. Min. Col. Width sets the minimal possible width of each column when resized manually. We'll leave Min. Height to 80 (pixels) and Min. Col. Width to 30 (pixels).
We uncheck the horizontal Stripe option
to prevent our even (2nd, 4th etc) columns from having a
darker gray colouring. We do leave the Vertical Stripe checked to
highlight the sorted column.
We leave the resizable field checked the Resizable field, to enable the resizing of the grid.
We select Nowrap to make sure our text is not cut off.
Save your files, upload them to your server
and the end result would look similar to this:
