1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5 <title>Rico Grid Overview</title>
\r
6 <link href="ricoDocs.css" rel="Stylesheet" type="text/css">
12 <p><a href='grids_ja.html'><img src='images/japanese.gif' alt='View this page in Japanese'></a>
\r
13 <a href='grids_ja.html'>View this page in Japanese</a></p>
\r
15 <p>The Rico library supports 2 different types of grids:
\r
16 <strong>LiveGrid</strong> and <strong>SimpleGrid</strong>.
\r
17 LiveGrid data is always buffered in a 2-dimensional JavaScript array. As the user scrolls
\r
18 vertically through the grid, data is dynamically copied from the array onto the grid.
\r
19 SimpleGrids on the other hand are unbuffered -- all data for the grid exists in the
\r
20 <a href="http://en.wikipedia.org/wiki/Document_Object_Model">DOM</a>, not
\r
21 in a JavaScript data structure.
\r
23 <p>Both types of grids share some common features, including:
\r
25 <li>column headings that stay fixed and don't scroll off the top of the screen
\r
26 <li>frozen columns on the left side of the grid
\r
27 <li>resizable columns
\r
28 <li>common css styling - styles developed for LiveGrids also work for SimpleGrids and vice versa
\r
29 <li>compatibility with languages that read right-to-left (rtl) -
\r
30 <a href="asp/rtl/ex1.asp">ASP</a> & <a href="php/rtl/ex1.php">PHP</a> examples are included
\r
31 <li>compatibility with Rico pop-up (context) menus
\r
36 <p>Rico provides lots of support for loading a LiveGrid buffer. The buffer can can be loaded from:
\r
38 <li>a SQL database query
\r
41 <li>a javascript array
\r
44 <h3>Connecting LiveGrid to a database</h3>
\r
45 <p>To simplify the task of loading a LiveGrid with SQL query results, Rico comes with a set of "plug-ins" which
\r
46 connect your database to your LiveGrid. Rico plug-ins have been tested with the following
\r
49 <p><table border='1' cellspacing='0' cellpadding='4' class='compat' style='margin-bottom:0px'>
\r
63 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
64 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
66 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
67 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
71 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
72 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
73 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
74 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
75 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
79 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
80 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
81 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
82 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
83 <td><img src='images/checkmark.gif' alt='checkmark'></td>
\r
87 <p style='font-size:8pt; margin:0px;'>Rico plug-in/database compatibility as of Nov 2007
\r
89 <br>* The ASP plug-in uses ADO and the .net plug-in uses ADO.net,
\r
90 <br>and thus should be able to connect with any data source that is compatible with ADO</p>
\r
92 <p>LiveGrid uses <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29">AJAX</a>
\r
93 technology so that only a portion of the SQL query result is
\r
94 sent to the client at a time. As the user scrolls the grid, the JavaScript code determines
\r
95 which portion of the query results are required and sends an AJAX request back to the plug-in.
\r
96 The plug-in retrieves those results from the database and returns them back to the client.
\r
97 So whether your query returns 10 rows or 100,000 rows, LiveGrid can display the results
\r
98 quickly and easily with an intuitive user interface.
\r
100 <p>Finally, if your users are allowed to make changes to the data, the Rico plug-ins
\r
101 make that easy too. Just define your grid using <strong>LiveGrid Forms</strong> --
\r
102 Add, Edit, and Delete record
\r
103 selections will be added to the grid's context (popup) menu.
\r
106 <li>When Add or Edit is selected, a popup
\r
107 form will be presented to the user.
\r
108 <li>When the user "saves" the form, the data is posted back
\r
109 to the original script, which writes the results back to the database.
\r
112 <p>If it sounds complicated, don't worry! All of this work is handled by the plug-in.
\r
113 See the "ex2edit" example
\r
114 for a demonstration of how easy it is, both for the user and the programmer.
\r
115 "ex4edit" demonstrates how to make multiple grids on a page editable.
\r
117 <h3>Populating LiveGrid with XML</h3>
\r
119 <p>While plug-ins make it easy to load data into a LiveGrid, they are not required.
\r
120 A LiveGrid buffer can be loaded with XML data from any source, as long as the data follows this format:
\r
123 <ajax-response>
\r
124 <response type='object' id='MyGridId_updater'>
\r
125 <rows update_ui='true' offset='0'>
\r
126 <tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>
\r
127 <tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>
\r
130 </ajax-response>
\r
133 <p>See the weather and photo examples, which retrieve data from Yahoo Weather and Flickr respectively and reformat the data
\r
134 into the structure shown above. These examples are currently available in PHP and .net versions, but not ASP.
\r
136 <h3>Populating LiveGrid with data from an HTML table</h3>
\r
138 <p>A LiveGrid can also be easily created on a web page that contains a traditional HTML table.
\r
139 Just assign an id to the table and pass that id in during LiveGrid initialization. Headings
\r
140 will be taken from the table's thead section and data from the tbody. No AJAX is
\r
141 performed in this case, but the data is still buffered in a JavaScript array. Several
\r
142 examples are included in the Rico distribution, look for the ones marked "LiveGrid-Static Buffer"</p>
\r
145 <h2>SimpleGrid</h2>
\r
147 <p>SimpleGrid's are new to Rico 2.0 and share some of the same functionality as LiveGrids -
\r
148 resizable columns, frozen columns, and frozen headings.
\r
149 However, unlike a LiveGrid, the data is static and resides in the DOM -
\r
150 so no buffering, no AJAX refreshes, no sorting, no filtering.
\r
151 Why would you use a SimpleGrid?
\r
153 <li>Because it is more flexible in what each cell can contain -
\r
154 cells in a column do not all have to be of the same type.
\r
155 <li>In some circumstances, it can perform better on the client than LiveGrid;
\r
156 particularly on a slow client displaying a grid with many columns.
\r
157 <li>Finally, a SimpleGrid can contain input elements (checkboxes, select lists, etc).
\r
158 While a LiveGrid can also contain input elements, because the element values are stored in the
\r
159 LiveGrid buffer, submitting the values back to the server can be tricky.
\r
160 SimpleGrids do not suffer from this problem. You can simply surround the
\r
161 entire grid with standard <form></form> tags and any
\r
162 input elements within the grid will be submitted back to the server.
\r
165 <p>The most sophisticated example of a SimpleGrid is the spreadsheet
\r
166 included with this distribution. You can enter formulas and it will
\r
167 recalculate when you change the inputs - just like a commercial spreadsheet.
\r
168 A link to the spreadsheet example can be found under the "HTML Examples" section
\r
169 of the examples menu.
\r
170 When in the spreadsheet, click the <img alt="help" style="vertical-align:top;" src="images/sheet/help.gif"> button to see all it can do.
\r
172 <p>SimpleGrids can be created either of two ways:
\r
174 <li>By using one of the SimpleGrid plug-ins. Plug-ins exist for PHP, ASP, and .net.
\r
175 <li>By using XSLT. Rico includes an XSL file that will convert a standard
\r
176 HTML table to a SimpleGrid.
\r
179 <h3>Creating a SimpleGrid by using a plug-in</h3>
\r
181 <p>Each plug-in defines a SimpleGrid class. Within the class, there are methods
\r
182 to start header rows and data rows - just call one of these methods everywhere
\r
183 you would put a <tr> tag in an HTML table. There is also a method to
\r
184 create a cell - just call it everywhere
\r
185 you would put a <th> or <td> tag in an HTML table.
\r
186 When you are done defining the table content, just call the render method
\r
187 (except in the .net plugin where render is called automatically).
\r
190 <h3>Creating a SimpleGrid by using XSLT</h3>
\r
192 <p>If your web page is XHTML compliant, then there is another way to generate a SimpleGrid.
\r
193 Just use the XSL stylesheet "ricoSimpleGrid.xsl" to transform tables in your page
\r
194 to SimpleGrids. The stylesheet looks for tables with a class name of "ricoSimpleGrid"
\r
195 and then does the transformation for you. At one time, Rico supported doing this
\r
196 transformation on the client. However, due to changes in the Prototype library, this
\r
197 is no longer possible. Therefore, if you choose to use this approach, the XSLT transform
\r
198 must be performed on the server.
\r
projects / infodrom / rico3 / blob