International Versions

• French

• Japanese

• Spanish

• Portuguese

Featured Demos

• Personal Planner

• Dashboards

4D Ajax Framework v11 Demos
    Release 1 and 2 (11.1/2)

 Toolbar

• Dynamic Toolbar Display
  This example shows how to dynamically display features of the toolbar object (add, delete, and search) using the 4D Ajax Framework’s JavaScript API.

 Preset Query

• Display A Preset Query
  In 4D Ajax Framework v11 Release 1, preset queries can now be displayed either in a tab or in a sidebar. This example demonstrates how to set and change query display options within a data object.

 Header and Footer

• Header and Footer Row Controls
  This example uses several new commands in 4D Ajax Framework v11 Release 1 to better customize header and footer rows within a grid. One key change is that all rows in the grid can now display wrapped text.

 Drag and Drop

• Drag and Drop Objects
  The Data Grid in 4D Ajax Framework v11 Release 1 has drag and drop capability built in. This example demonstrates 3 different ways of handling drag and drop between two Data Grid objects.

 Column Manipulation

The 4D Ajax Framework’s JavaScript API can be used to perform a number of manipulations on columns in the Data Grid. Here are three different examples:

• Column Locking
  This example demonstrates how to lock a Data Grid column. This feature allows the user to horizontally scroll left and right while a locked column remains visible.
  
  
• Column Display Control
  This example shows how to show and hide selected Data Grid columns.
  
  
• Column Resizing
  This example demonstrates how to manipulate the size of a Data Grid column.
  
  

 CSS Style and Cell

• Independent Cell Styles
  The Data Grid in 4D Ajax Framework v11 Release 1 supports independent cell styling. This feature allows the developer to dynamically change or override styles for any cell, row, or column.

 Inline Editing

• Enable and Disable Inline Editing
  Data Grid 2.0 allows users to modify a record right in the Data Grid area. This example demonstrates three of the new inline editing commands.

 Image Control

• Image Hovering Preview
  Previously, to display an image in a grid, you had to click on it and open a new window. Now, you can move your pointer over a link and preview the image without having to click through to see it.
  
  
• Image Hovering Events
  This example expands on the first Image Hovering demo by adding some additional events to the image handling.
  

 Events

• On Column Click
  onDataColumnClick (11.1) is an event that is fired when a column header is clicked. This example demonstrates that to execute a javascript code with this event is fired.
  
  
• On Row Click
  onDataRowClick (11.1) is an event that is fired when a row is clicked. This example demonstrates that to execute a javascript code with this event is fired.
  
  
• On Cell Click
  onDataCellClick (11.1) is an event that is fired when a data grid cell is clicked. This example demonstrates that to execute a javascript code with this event is fired..
  
  
• On Row Double Click
  onDataRowDblClick (11.2) is an event that is fired when a data grid row is double clicked. This example demonstrates that to execute a javascript code with this event is fired.
  
  
• On Cell Double Click
  onDataCellDblClick (11.2) is an event that is fired when a data grid cell is double clicked. This example demonstrates that to execute a javascript code with this event is fired.
  
  

 Charts

• Expanded Type Support
  The dashboard charting feature has been expanded in this release to support three new chart types: SVG, PNG and the Google Chart API. This example shows how to embed these charts in a web page.

 Drag and Drop

• Shopping Cart
  This example demonstrates how to create a shopping cart using objects from the 4D Ajax Framework. This page uses three data grids: one to display a list of products, one for a our cart icon, and one to display the actual shopping cart list. Objects can be dragged from the product list data grid and dropped onto the cart icon data grid. When this happens, the contents of the shopping cart data grid will be updated according to a few rules we define.

 Custom Variables

• Car Dealer
  This example demonstrates how to use custom values in the 4D Ajax Framework. The custom value data is sent from the web page (frontend) and recieved in the 4D Database (backend). The 4D Database (backend) then performs a query and sends custom values back to the web page (frontend) which then formats the data and displays it on the web page.

 Bridge - Record Manipulation (11.2)

• Add Record
  This example demonstrates how to use the dax_bridge.addRecord command to add records to the back end 4D database through a custom-HTML input layout.
  
  
• Batch Add Record
  This example demonstrates how to use the dax_bridge.addRecordBatch (new for v11.2) command to add multiple records to the backend 4D database through a custom-HTML input layout.
  
  
• Modify Record
  This example demonstrates how to use the dax_bridge.modifyRecord commmand to modify a record in the backend 4D database through a custom-HTML input layout.
  
  
• Delete Record
  Delete one or more records through dax_bridge.deleteRecords command.
  
  

 Bridge - Data Access

• Choice List
  Display and access a choice list through dax_bridge.getChoiceList command.
  
  
• Get a Record
  This example demonstrates how to use the dax_bridge.getRecord command to get records from the backend 4D database.