<body>\r
<h1>Creating a Rico LiveGrid</h1>\r
\r
-<p><a href='LiveGrid_ja.html'><img src='images/japanese.gif' alt='View this page in Japanese'></a>\r
-<a href='LiveGrid_ja.html'>View this page in Japanese</a></p>\r
-\r
<p>Rico LiveGrid displays data in a scrolling table, with the data buffered in a \r
2-dimensional JavaScript array. As the user scrolls\r
vertically through the grid, data is dynamically copied from the array onto the grid.\r
</dl>\r
\r
<li>Create a Rico Buffer, which fetches data to populate the table.\r
-The AjaxXML buffer makes just one request for data to the supplied URL\r
+The AjaxLoadOnce buffer makes just one request for data to the supplied URL\r
at grid startup.\r
<pre>\r
-var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');\r
+var buffer = new Rico.Buffer.AjaxLoadOnce('/controller/action?format=xml');\r
</pre>\r
\r
The URL ("/controller/action?format=xml" in this example) must return data in the following format:\r
Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
\r
Rico.onLoad( function() {\r
- var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');\r
+ var buffer = new Rico.Buffer.AjaxLoadOnce('/controller/action?format=xml');\r
var grid_options = { columnSpecs: [,] };\r
var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
});\r
</dl>\r
\r
<li>Create a Rico Buffer, which fetches data to populate the table.\r
-Unlike the AjaxXML buffer which fetches all grid data at once, the AjaxSQL\r
+Unlike the AjaxLoadOnce buffer which fetches all grid data at once, the AjaxSQL\r
buffer fetches data in chunks. This makes it possible for LiveGrid to\r
efficiently display query results containing thousands, or even hundreds of thousands\r
of rows.\r
data using an xmlHTTPrequest, the data is fetched using javascript callback functions.\r
This allows you to do creative things in the callback function - like call Google Gears.\r
Setting up the callback is very easy. Rather than passing a string containing the data provider's URL\r
-to the AjaxXML or AjaxSQL constructor, you just pass the callback function instead.\r
+to the AjaxLoadOnce or AjaxSQL constructor, you just pass the callback function instead.\r
\r
<p>The code that follows is taken from \r
<a href='client/gridJSbuffer.html'>examples/client/gridJSbuffer.html</a>, \r
-which uses the AjaxXML buffer. The "jsfetch" callback function\r
+which uses the AjaxLoadOnce buffer. The "jsfetch" callback function\r
returns a 2-dimensional array that is 100 rows long by 5 columns wide.\r
-Note that AjaxXML only loads its buffer once (at grid startup), so\r
+Note that AjaxLoadOnce only loads its buffer once (at grid startup), so\r
jsfetch will only be called once.\r
The options hash is identical in structure to the options hash used\r
by Prototype's <a href='http://prototypejs.org/api/ajax/options'>Ajax.Request</a> method.\r
\r
<pre>\r
-buffer=new Rico.Buffer.AjaxXML(<strong>jsfetch</strong>);\r
+buffer=new Rico.Buffer.AjaxLoadOnce(<strong>jsfetch</strong>);\r
\r
function <strong>jsfetch</strong>(options) {\r
- Rico.writeDebugMsg("jsfetch");\r
+ Rico.log("jsfetch");\r
var newRows=[], offset=options.parameters.offset;\r
for (var r=0; r<100; r++) {\r
var row=[];\r
\r
\r
<h2><a name='debug'></a>Debugging</h2>\r
-<p>Rico 2.0 includes the ability to route time-stamped debug messages to a message log.\r
+<p>Rico includes the ability to route time-stamped debug messages to a message log.\r
The log may be an html textarea or the browser's javascript console.\r
<ul>\r
<li>If a textarea exists with the id of the LiveGrid table plus '_debugmsgs', i.e.\r
<li>If no textarea is designated, Rico will attempt to use the browser's\r
built-in javascript console. The following consoles are known to work:\r
<ul>\r
- <li>The console in Firefox's <a href='http://www.getfirebug.com/'>Firebug</a> add-on\r
+ <li>The web console in Firefox\r
+ <li>The console in the Firefox <a href='http://www.getfirebug.com/'>Firebug</a> add-on\r
<li>The Opera javascript console\r
<li>The Safari javascript console\r
+ <li>The Chrome javascript console\r
<li>The console in <a href='http://blogs.msdn.com/ie/archive/2008/09/03/developer-tools-in-internet-explorer-8-beta-2.aspx'>IE8's Developer Toolbar</a> (under the Script tab)\r
</ul>\r
</ul>\r
\r
<p>LiveGrid is programmed to send a number of messages to the message log that may prove helpful in debugging.\r
-You can also send your own messages by using Rico.writeDebugMsg(). For example:\r
+You can also send your own messages by using Rico.log(). For example:\r
<pre>\r
-Rico.writeDebugMsg('My debug message');\r
+Rico.log('My debug message');\r
</pre>\r
\r
<h2>Grid Menus</h2>\r
<li><strong>rico_buffer</strong> is a Rico Buffer object, e.g.\r
<ul>\r
<li>Rico.Buffer.Base (for non-AJAX tables)\r
- <li>Rico.Buffer.AjaxXML\r
+ <li>Rico.Buffer.AjaxLoadOnce\r
<li>Rico.Buffer.AjaxSQL\r
- <li>Rico.Buffer.AjaxJSON\r
</ul>\r
<li><strong>grid_options</strong> (see below)\r
</ul>\r
<dd>Allow columns to be resized by the user? If true, then resizing for individual columns \r
can be disabled using <a href='#noResize'>noResize</a> in columnSpecs[].\r
\r
-<dt>panels\r
+<dt>ColGroups\r
<dd>An array of strings that can serve as secondary headings.\r
In LiveGrid Forms, they also serve as the headings for the tabbed panels on the input form.\r
\r
-<dt>PanelNamesOnTabHdr\r
-<dd>Set to 'true' for the strings in panels[] to be used as secondary headings.\r
-In LiveGrid Forms, it may be set to 'false' so that panels[] is only used on the input form.\r
+<dt>ColGroupsOnTabHdr\r
+<dd>Set to 'true' for the strings in ColGroups[] to be used as secondary headings.\r
+In LiveGrid Forms, it may be set to 'false' so that ColGroups[] is only used on the input form.\r
\r
-<dt><a name='FilterLocation'>FilterLocation</a>\r
-<dd>Specifies the heading row where filters should be placed.\r
--1 causes a new row to be appended to the header and that new row used for filtering.\r
-See also the <a href='#filterUI'>filterUI</a> option.\r
+<dt><a name='AutoFilter'>AutoFilter</a>\r
+<dd>If enabled, an additional row is added to the grid header where column filters are placed.\r
+See the <a href='#filterUI'>filterUI</a> option to customize each column's filter.\r
\r
<dt>FilterAllToken\r
-<dd>Token in select filters used to indicate "show all values" (default: "___ALL___").\r
+<dd>The token in select filters used to indicate "show all values" (default: "___ALL___").\r
</dl>\r
\r
-<h4>Images</h4>\r
-<dl>\r
-<dt>resizeBackground\r
-<dd>Image to use for column resize handle. (default: 'resize.gif')\r
-\r
-<dt>sortAscendImg\r
-<dd>Image to use to indicate that the column is sorted in ascending order. (default: 'sort_asc.gif')\r
-\r
-<dt>sortDescendImg\r
-<dd>Image to use to indicate that the column is sorted in descending order. (default: 'sort_desc.gif')\r
-\r
-<dt>filterImg\r
-<dd>Image used to indicate an active filter on a column. (default: 'filtercol.gif')\r
-</dl>\r
-\r
-\r
<h4>Cookie options</h4>\r
<dl>\r
\r
\r
<dt>maxPrint\r
<dd>The maximum number of rows that the user is allowed\r
-to Print/Export. Set to 0 to disable print/export. (default: 1000)\r
+to Print/Export. Set to 0 to disable print/export. (default: 5000)\r
\r
<dt>exportWindow\r
<dd>Options string passed to <a href='http://www.w3schools.com/htmldom/met_win_open.asp'>window.open()</a>\r
<dd>A string that specifies when the grid's menu should be invoked\r
<ul>\r
<li>'click' -- invoke menu on single-click\r
- <li>'dblclick' -- invoke menu on double-click (default)\r
+ <li>'dblclick' -- invoke menu on double-click\r
<li>'contextmenu' -- invoke menu on right-click\r
- <li>'none' -- no pop-up menu\r
+ <li>'none' -- no pop-up menu (default)\r
</ul>\r
\r
<dt>windowResize\r
<dt>type (DataType in .net plug-in)\r
<dd>A string containing one of these values: \r
<ul>\r
-<li>text - any tags in the column value are removed before being displayed to the user.\r
-<li>showTags - any tags in the column value are displayed to the user as text.\r
+<li>text (default) - plain text.\r
<li>number - column value is treated as a number, \r
and any <a href='#NumberFormatting'>number formatting options</a> \r
supplied in the column specification are applied.\r
<li>datetime - column value is treated as a date & time, \r
and any <a href='#DateFormatting'>date formatting options</a> \r
supplied in the column specification are applied.\r
-<li>
UTCasLocalTime - column/database value is treated as a GMT/UTC date & time, and any <a href='#DateFormatting'>date formatting options</a>
\r+<li>
utcaslocaltime - column/database value is treated as a GMT/UTC date & time, and any <a href='#DateFormatting'>date formatting options</a>
\r supplied in the column specification are applied. Before display, the value is converted to the user's local time zone.\r
<li>date - column value is treated as a date, and any <a href='#DateFormatting'>date formatting options</a> \r
supplied in the column specification are applied.\r
-<li>raw (default) - column values are displayed directly to the grid cell. \r
+<li>html - column values are displayed directly to the grid cell. \r
Any HTML markup gets copied into the cell.\r
</ul>\r
</dd>\r
</pre>\r
\r
<dt><a name='filterUI'></a>filterUI\r
-<dd>If a <a href='#FilterLocation'>FilterLocation</a> option is specified for the grid, then filterUI will control\r
+<dd>If the <a href='#AutoFilter'>AutoFilter</a> option is enabled for the grid, then filterUI will control\r
how each column is filtered. If filterUI is:\r
<ul>\r
<li>null or omitted, then no filter is displayed for the column.\r
<li>'t' - will generate a text box filter and the records being displayed\r
are filtered as the user types. \r
-<br>May optionally be followed by a caret (^) to\r
-indicate that text box values should match the beginning of the column value.\r
-Otherwise, they can match anywhere in the column's value.\r
-<br>May also be followed by a number to indicate the size of the text box (default size is 10).\r
+<br>May be followed by a number to indicate the size of the text box (default size is 10).\r
<pre>\r
-filterUI:'t^20' \r
+filterUI:'t20' \r
// will create a text box that is 20 characters wide\r
-// text typed into the box will be compared to\r
-// the beginning of each column value\r
</pre>\r
<li>'s' - will generate a select list filter with all possible column values contained in the list.\r
Populated using a 'select distinct' query if the grid's source is a SQL query.\r
+<li>'m' - will generate multi-select checklist filter, with a checkbox next to each item.\r
</ul>\r
\r
<dt></a>filterCol\r
<dt>decPlaces\r
<dd>Number of places to the right of the decimal point. (default: 0)\r
\r
-<dt>decPoint\r
-<dd>Decimal point symbol. (default: '.' but overridden in the translation files)\r
-\r
<dt>thouSep\r
-<dd>Symbol for thousands separator. (default: ',' but overridden in the translation files)\r
+<dd>Boolean indicating whether to insert thousands separator. (default: true)\r
\r
<dt>negSign\r
<dd>Specifies how negative numbers should be displayed. Possible values:\r
projects / infodrom / rico3 / blobdiff