Back to Top
The nuts and bolts for
Creative web development

Ajax DataGrid

“Create a great looking, interactive Ajax Grid in Dreamweaver within minutes.”

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!


Features

  • Dependent Grid - Visually link two grids together to create a master/detail relationship
  • Row Behaviors - Add any action with the DMXzone behavior connector on the grid row

  • Runtime Filtering - Filter the grid based on input from any other grid or form field on the page

  • Full Unicode Support - Your grids (including filters) can display any foreign characters

  • Extended Grid Filtering - Specify dynamic filters based on a query string, cookies or session variables

  • Support for Views - Use more then just tables from your database, use views for more complicated queries

  • Improved Security - The generated Ajax Service handles its inputs more secure, blocking various SQL injection attacks

  • Customized Error Handling - In case of problems with the Ajax service, you'll get a full error report in your grid

  • Optimized Performance - Various Server Side speed optimizations, especially when using Microsoft Access Databases

  • Create a cool Ajax DataGrid in seconds - Create a great looking, interactive Ajax Grid in Dreamweaver without coding.

  • Customize the grid any way you want to:
    • Give your DataGrid a sleek and stylish look with one of the predefined styles.
    • Columns are sortable, can be reordered and resized.



    • Resize the grid by dragging its borders.

    • Select one of the many table formatting options to fit the Grid perfectly in your site.
    • Choose from a rich set of navigation options that include paging, searching and filtering options.

    • You can customize the content/images inside your table with formatting, alignment, width, and more.
    • Choose to highlight rows or columns, wrap cells, and set opacity while loading.
    • Enable the users to collapse the grid.

  • Ajax Technology - The grid loads extremely fast due to Ajax technology that only loads the displayed data.

  • Connectivity - Connect with any datasource, whether it’s MySQL or MS SQL Server, using auto generated ASP or PHP Code. Use an intuitive interface to browse trough your database and select the table and columns you would like to display.


  • Accessibility
    • Inline search enables users to quickly find any content they are looking for
    • Search and sort content
    • Use Behaviors to control your table from your page.
  • Fully integrated in Dreamweaver - Configure the grid with a great looking dialog that visually displays all options. No coding is required.


  • Fully PC and MAC (OSX and Leopard) compatible.
  • Accessible property inspector for easy editing - The property inspector enables you to change several options directly.

Showcases


  • Cars Magazine Showcase

    For this showcase we used DMXzone Supersized for the beautiful background images, Ajax Datagrid for the car specs and Advanced CSS Animator for the sliding out panel that is triggered on mouse over.

  • Destination Availability Showcase

    In this showcase we used CSS edited and customized Universal CSS Navigation Menu, DMXzone Lightbox that the images are opening in and DMXzone Google Maps that shows the hotel's location. The Ajax ...

  • Facebook Christmas Catalog Showcase

    In this showcase you can see how easy it is to create a product catalog using 3 Dreamweaver extensions. All products are displayed in the updated Ajax DataGrid and on click a DMXzone Lightbox opens ...

  • Upcoming Events Showcase

    In this showcase you can see how easy it is in an event calendar to display additional info, which is placed in a grid.

  • Advanced HTML Editor 3 Meets Ajax DataGrid and DMXzone Lightbox

    The Ajax DataGrid shows the database records that contain the movie images and description. In order to edit the description, simply double click the record and the DMXzone Lightbox will popup ...

  • HTML5 Slideshow & Ajax DataGrid

    In this showcase you can see how easy it is in an event calendar to display additional info, which is placed in a grid.

  • Wacken 2009 Lineup Showcase

    Click(on a non-blurred date) to see the Events for each day of the festival.

  • 20th Anniversary Wacken

    Click on a non-blurred date in the Calendar in order to see the events for each day of the festival. For band info click on the row.

  • Universal Datagrid Exporter Showcase

    Exporting Ajax DataGrid to a PDF with the help of Universal Data Exporter ASP. This showcase shows how the Ajax DataGrid can be exported to a PDF. You can customize the table appearance(sort, move ...

  • Grid Sound Bundle Showcase

    We combine the Flash MP3 Player with Ajax Datagrid to create an interactive grid with songs. Browse for your favorite track using the grids navigation. You can also use the search function to filter ...

  • Ajax DataGrid Teams Up with Layer Popup and Tooltips

    In this demo the grid is integrated with Advanced Layer Popup and Advanced Tootltips. Click on the planes for a larger version in a popup.

  • Old Cars Collection Showcase

    Check out the LIVE showcase of a basic Ajax Grid:

Videos

Creating an Interactive Grid

This movie tutorial shows how to create an interactive grid using Ajax DataGrid .



Using the Behavior Connector in Ajax Datagrid
This movie presents the different datasources, customizable details and how to use the Behavior Connector.

 

Make Virtual Table from two MS SQL Tables
In this movie we will show you how to make a virtual table from two MS SQL tables and present the result in Ajax DataGrid.

 

Filter the Ajax DataGrid by a date from the DMXzone Calendar
In this video we will show you how easily you can filter the contents of your Ajax DataGrid by date from the DMXzone Calendar.



Make a Virtual Table from two MySQL Tables
In this movie we will show you how to make a virtual table from two MySQL tables and present the result in Ajax DataGrid.

 


Connect Two Ajax Datagrids Together
This movie shows how you can create a master/detail grid as displayed above.



Creating A Basic Datagrid
This movie shows how easy you can create an interactive grid using Ajax Datagrid. We'll present the basic features of this Dreamweaver Extension including interface options, creating a database connection and grid customization.

Requirements

Type: Suite
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Server Model: ASP JavaScript, ASP VBScript, PHP MySQL
Platform: Win XP/2000/2003/2008/7, Mac OS X
Browser: IE 7, Firefox 3.6+, Opera 9.5, Chrome 9+, IE 8, Safari 4+, iPad, IE 9, Safari 5+, Firefox 4+, Chrome 10+
Used Technologies: jQuery, Ajax, Web 2.0, JavaScript


History

Version 1.1.2

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.1.1

  • jQuery 1.7.2 included
  • Improved Dreamweaver CS6 compatibility
  • Improved javascript file compression for smaller and faster file loading
  • Improved extension installation

Version 1.1.0

  • Greatly improved all row and column behaviors
  • Various source file optimizations for smaller size

Version 1.0.9

  • Improved compatibility with newest jQuery 1.6+ versions
  • Included latest jQuery 1.6.3
  • Optimized source and files for smaller size
  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Improved working in Dreamweaver templates

Version 1.0.8

  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Great speed improvements on the Dreamweaver interface

Version 1.0.7

  • New automatic dependent file updater
  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improvements with the behavior connector events
  • Improved working in Dreamweaver templates
  • Various UI bugfixes and improvements
  • Fixed a bug that caused the column's "sortable" checkbox to be always displayed as checked
  • Optimized reading of the value of the combo-control for custom formats. This fixes the bug that prevents the user from adding custom formatting functions.

Version 1.0.6

  • Huge speed optimization on database tables and field selections in Dreamweaver
  • Improved CS5 compatibility
  • Improved JSON data generation to be fully JSON compliant
  • Improved jQuery 1.4.2 compatibility
  • Improved MySQL support for table names with mixed case
  • Optimized database type detection in Dreamweaver
  • Fixed inspections of grids with a single field
  • Fixed resize on grids with hidden columns

Version 1.0.5

  • New option to place the navigation bar on top
  • New and improved DMXzone Behavior Connector
  • Latest jQuery 1.3.2 included
  • Fixed error with show "Choose columns" popup option
  • Extensibility improvements

Version 1.0.4

  • Enhanced Mac and Dreamweaver CS4 Compatibility
  • Improved vertical resizing
  • Fixed column - sortable detection
  • Results per page can be changed
  • Various other bug fixes

Version 1.0.3

  • New translation options and other bug fixes
  • Two new great looking skins

Update Procedure

  1. Open one page that use the Ajax DataGrid in Dreamweaver
  2. Select the Ajax DataGrid Object on your page and then reapply it by clicking on the extension icon from the DMXzone objects panel
  3. Press the ok button to reapply the extension when the extension dialog pops up
  4. You should see some alerts about updated files, make sure you upload these to your live server and you are ready.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Reviews

Love the data grids!!!! Only one issue....

The only issues I have is that I cannot search each column in the grid directly from the column headers and I cannot compound-sort.  Can this be possible???  Really similar to the way jQuery grids work. 

This is a first class extension

I am extremely happy with this extension. I am using one grid to drive another grid and my customer is over the moon about it. Many thanks DMXzone. May you all have a happy and peaceful Christmas!!

RE: RE: Great extension and fast ajax but....

Hi George and thanks for your quick reply.

I am happy to hear that. But i am kinda lost as to where this VIEW is defined on which code page?

Maybe you can give us an example to where we put the sql code. Maybe others will benefit from a small tutorial like that.

Kind Regards
Sofus

PHP
// SQL begins

// END of SQL

RE: Great extension and fast ajax but....

Hi Sofus,
Thanks for your compliment! About more complicated queries it is actually no problem - you just need to define a VIEW from your complicated query in MySQL and then you can use the VIEW just like a simple table in the Ajax DataGrid!

Greetings,
   George

See all 5 Reviews