Ajax Datagrid Manual

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.

Users can customize the grid display with a rich set of options. Columns are sortable, can be reordered and resized. They can even resize the grid by dragging its borders. Presenting your data has never been so intuitive and easy!

Advanced: Using the Row Behaviors

Introduction

In this chapter we're going to explain Row Behaviors by creating a Master Grid. When the user clicks on the row of the top grid (an e-Magazine in this tutorial's case), the bottom grid will become active and display the articles of the selected e-Magazine. We'll use two different grids for this tutorial. Below is a screenshot of the end result.

Creating the Popup

Open Dreamweaver
We open two grids that we have already created and connected to a database and place them on one page. We select the first grid.
Open the behaviors connector
We open the Ajax Datagrid dialog with the Advanced button and we go to the Details tab. We select Row Behaviors. The DMXzone Behaviors Connector appears. column where we want to add our cell behaviour to and we press the Cell Behaviors button.
Adding the Behavior
We select the Control Ajax Datagrid behavior and we apply it to the event "when the row is clicked".

A window of the behavior pops up. We choose the ID name of the second grid and set the Set Grid Filter item. In our database we have two tables: one with the e-Magazines that are identified by the column called MagazineID. This table is used by the first grid. The second table lists all articles. We also have a column here that specifies in which e-Magazine the article is published. This column is also named MagazineID. We link the two columns together.
We enter the name of the column of the first grid in the Column: field and we enter the value of the second grid between curly brackets in the Value: field.

Press OK. The Behaviors are listed in the attached behaviors box.

Press OK. To apply the behavior.

The Row Behaviors button turns red to indicate we added a behavior.

Press OK. To apply the settings.

Save the files and preview your grid. Click on the photos to open them in a popup.
Modifying the second Grid
Now select the second grid to change its settings. We want to prevent it from loading all articles from all e-Magazines when there is no magazine selected.

Uncheck the Auto load data checkbox

Press OK and you are set.