PLEASE NOTE: This Tech Tip applies to 4D Web 2.0 Pack version 1.1
The 4D Ajax Framework contains several types of Data View objects for displaying data on a web page. Each Data View object displays data in a different format and is used for a different purpose. This Tech Tip will discuss creating a web page that will utilize the Data Grid object. A full source code example is provided at the end of this Tech Tip.
The Data Grid's purpose is to display data in a tabular view. The Data Grid supports live updating of the data as well, so the data is always fresh and in realtime. The Data Grid also allows several customization options like showing/hiding specific columns, row actions and events.
|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
<title> replace with your document's title </title>
replace with your document's content
With a simple HTML page like the above you can start to add the required pieces to create a functional Data Grid object.
Lets start by adding the required call to the 4D Ajax Framework Cascading Style Sheets. As you know Cascading Style Sheet calls are places in the <head></head> of the HTML page, but before the <title></title>. The call would look similar to:
|<!-- ### EXPLANATION ### - - This next line defines the style sheet that all 4D AF objects need to look proper --> |
<link rel="stylesheet" href="dax/themes/basic/basic.css" media="all" type="text/css" title="XPress" />
<title></title> tag. Similar lines like the following should be added.
Code needs to be placed inside the <script></script> tags. This code defines necessary events that must run when the web page is loaded in the browser. The first event, dax_load() is fired when the page loads in the browser. This code simply logs in to the database with the specified user so that we can work with the 4D Ajax Framework Objects and the data they require. The second event is onAfterInit() and is fired after the dax_load() event has executed. This event is where the Data Grid object is created and customized as needed. This code is as follows:
// Do Not Modify dax_load function
<!-- // ### EXPLANATION ### - - onAfterInit gets fired and as you can see below this is where the DataGrid is created with all necessary paramemters. Notice the MyDataGrid1.customize statement, other commands like .SetCoumnWidth would go in this same place, after, the creation of the Grid itself. -->
Lastly, it is necessary to define your objects in the <body></body>. Since the bulk of the work as been done, the calls inside the <body></body> tag are easy. They would look something like:
<!-- Here is where you define the grid and place it at its desired location on your HTML page -->
<div id="dax_grid1" class="dax_object"></div>
It is important to note that the <div id=""> name used matches the document.getElementByID(" ") name used in the onAfterInit() function. If these do not match, the Data Grid object will not be displayed or work properly.
For clarity, here is the complete code that was explained above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4D, Inc. also now offers a Dreamweaver CS3 extension to help aid in the process of creating 4D Ajax Framework based pages. More information about this extension can be found at:
For the latest information the 4D Ajax Framework please see the Daxipedia: