--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
+<html>\r
+<head>\r
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+<title>Rico LiveGrid</title>\r
+<link href="ricoDocs.css" rel="Stylesheet" type="text/css">
+</head>\r
+\r
+<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
+The buffer can can be loaded from:\r
+<ol>\r
+<li><a href='#model1'>a javascript array</a>\r
+<li><a href='#model2'>an HTML table</a>\r
+<li><a href='#model3'>an XML file</a>\r
+<li><a href='#model4'>a SQL database query</a>\r
+<li><a href='#model5'>a custom javascript callback function</a>\r
+</ol>\r
+\r
+\r
+<h2><a name='model1'>Usage Model 1: Loading data from a javascript array</a></h2>\r
+\r
+<ul><li>Load the data to be displayed into a javascript array.\r
+<pre>\r
+ var myData = [\r
+ [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],\r
+ [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],\r
+ [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],\r
+ [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']\r
+ ];\r
+</pre>\r
+\r
+<li>Load the Rico javascript and css files necessary to display the grid.\r
+<pre>\r
+Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
+</pre>\r
+<dl>\r
+<dt>LiveGrid\r
+<dd>This loads the Rico javascript and css files necessary to display a LiveGrid \r
+with a static buffer (no AJAX).\r
+<dt>LiveGridMenu\r
+<dd>This loads the default grid menu. This menu provides access to all of the LiveGrid capabilities.\r
+It adjusts the selections presented to the user based on the column selected \r
+and the type of buffer used.\r
+You can also choose to use the grid with no menu at all, or to create your own menu\r
+customized to the needs of your application.\r
+<dt>greenHdg.css\r
+<dd>Rico comes with several sample grid styles: coffee-with-milk,\r
+grayedout, greenHdg, iegradient (Internet Explorer only), tanChisel, and warmfall. \r
+You may choose one of the included styles or create one of your own. \r
+</dl>\r
+\r
+<li>Load the array into a Rico Buffer object:\r
+<pre>\r
+ var buffer=new Rico.Buffer.Base();\r
+ buffer.loadRowsFromArray(myData);\r
+</pre>\r
+\r
+<li>Define the grid's options, including the grid headings:\r
+<pre>\r
+ var opts = { \r
+ defaultWidth : 90,\r
+ visibleRows : 'data',\r
+ frozenColumns: 1,\r
+ columnSpecs : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},\r
+ {Hdg:'Column 2'},\r
+ {Hdg:'Column 3'},\r
+ {Hdg:'Column 4'},\r
+ {Hdg:'Column 5'}]\r
+ };\r
+</pre>\r
+\r
+<li>Instantiate the LiveGrid, passing in the base id for the grid, \r
+the Rico.Buffer instance, and the grid options.\r
+<pre>\r
+ var ex1=new Rico.LiveGrid ('ex1', buffer, opts);\r
+</pre>\r
+\r
+<li>To enable the default pop-up menu for the grid, assign the grid's\r
+menu property to an instance of Rico.GridMenu.\r
+<pre>\r
+ ex1.menu=new Rico.GridMenu();\r
+</pre>\r
+\r
+<li>Rico.loadModule may finish <em>after</em> the window.onload event.\r
+So to ensure that the grid initialization runs after the Rico modules\r
+have loaded, you must pass the initialization function to the\r
+Rico.onLoad method. Putting all of the javascript together would look like this:\r
+<pre>\r
+<script type='text/javascript'>\r
+Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
+\r
+Rico.onLoad( function() {\r
+ var myData = [\r
+ [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],\r
+ [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],\r
+ [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],\r
+ [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']\r
+ ];\r
+ var opts = { \r
+ defaultWidth : 90,\r
+ visibleRows : 'data',\r
+ frozenColumns: 1,\r
+ columnSpecs : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},\r
+ {Hdg:'Column 2'},\r
+ {Hdg:'Column 3'},\r
+ {Hdg:'Column 4'},\r
+ {Hdg:'Column 5'}]\r
+ };\r
+ var buffer=new Rico.Buffer.Base();\r
+ buffer.loadRowsFromArray(myData);\r
+ var ex1=new Rico.LiveGrid ('ex1', buffer, opts);\r
+ ex1.menu=new Rico.GridMenu();\r
+});\r
+</script>\r
+</pre>\r
+\r
+<li>Finally, place a div element in your HTML markup at the position where the grid should go.\r
+Including the markup for the bookmark will cause the grid's scroll position to be displayed.\r
+<pre>\r
+<p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>\r
+<div id="ex1"></div>\r
+</pre>\r
+\r
+\r
+\r
+</ul>\r
+\r
+\r
+<h2><a name='model2'>Usage Model 2: Loading data from an HTML table</a></h2>\r
+\r
+<ul><li>Define an HTML table with the headings in a <code><thead></code> section\r
+and the data in a <code><tbody></code> section.\r
+Including the markup for the bookmark will cause the grid's scroll position to be displayed.\r
+<pre>\r
+<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
+<table id="data_grid">\r
+ <thead>\r
+\r
+ <tr>\r
+ <th>First column name</th>\r
+ <th>Second column name</th>\r
+ ...\r
+ <th>Last column name</th>\r
+ </tr>\r
+\r
+ </thead>\r
+\r
+ <tbody>\r
+\r
+ <tr>\r
+ <td>Row 1, column 1 data</td>\r
+ <td>Row 1, column 2 data</td>\r
+ ...\r
+ <td>Row 1, last column data</td>\r
+ </tr>\r
+\r
+ <tr>\r
+ <td>Row 2, column 1 data</td>\r
+ <td>Row 2, column 2 data</td>\r
+ ...\r
+ <td>Row 2, last column data</td>\r
+ </tr>\r
+\r
+ ...\r
+\r
+ <tr>\r
+ <td>Row n, column 1 data</td>\r
+ <td>Row n, column 2 data</td>\r
+ ...\r
+ <td>Row n, last column data</td>\r
+ </tr>\r
+\r
+ </tbody>\r
+</table>\r
+</pre>\r
+\r
+<li>Load the Rico javascript and css files necessary to display the grid.\r
+<pre>\r
+Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
+</pre>\r
+<dl>\r
+<dt>LiveGrid\r
+<dd>This loads the Rico javascript and css files necessary to display a LiveGrid \r
+with a static buffer (no AJAX).\r
+<dt>LiveGridMenu\r
+<dd>This loads the default grid menu. This menu provides access to all of the LiveGrid capabilities.\r
+It adjusts the selections presented to the user based on the column selected \r
+and the type of buffer used.\r
+You can also choose to use the grid with no menu at all, or to create your own menu\r
+customized to the needs of your application.\r
+<dt>greenHdg.css\r
+<dd>Rico comes with several sample grid styles: coffee-with-milk,\r
+grayedout, greenHdg, iegradient (Internet Explorer only), tanChisel, and warmfall. \r
+You may choose one of the included styles or create one of your own. \r
+</dl>\r
+\r
+<li>Load the table's data rows into a Rico Buffer object:\r
+<pre>\r
+var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);\r
+</pre>\r
+\r
+<li>Finally, instantiate the LiveGrid, passing in the DOM id of the HTML table\r
+(this allows the LiveGrid to load the column headings from the table's thead section), \r
+the Rico.Buffer instance, and any options (in this case the first column gets\r
+a width of 50 pixels and the second column gets a width of 80 pixels).\r
+<pre>\r
+var grid_options = { columnSpecs: [ {width:50}, {width:80} ] };\r
+var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+</pre>\r
+\r
+<li>Rico.loadModule may finish <em>after</em> the window.onload event.\r
+So to ensure that the grid initialization runs after the Rico modules\r
+have loaded, you must pass the initialization function to the\r
+Rico.onLoad method. Putting all of the javascript together would look like this:\r
+<pre>\r
+<script type='text/javascript'>\r
+Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
+\r
+Rico.onLoad( function() {\r
+ var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);\r
+ var grid_options = { columnSpecs: [width:50, width:80] };\r
+ var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+});\r
+</script>\r
+</pre>\r
+\r
+</ul>\r
+\r
+\r
+<h2><a name='model3'>Usage Model 3: Loading data from an XML file</a></h2>\r
+\r
+<ul><li>Define an HTML table, supplying the table header cells, but no table body cells.\r
+Including the markup for the bookmark will cause the grid's scroll position to be displayed.\r
+<pre>\r
+<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
+<table id="data_grid">\r
+ <tr>\r
+\r
+ <th>First column name</th>\r
+ <th>Second column name</th>\r
+\r
+ </tr>\r
+</table>\r
+</pre>\r
+\r
+<li>Load the Rico javascript and css files necessary to display the grid.\r
+<pre>\r
+Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
+</pre>\r
+<dl>\r
+<dt>LiveGridAjax\r
+<dd>This loads the Rico javascript and css files necessary to display a LiveGrid \r
+with an AJAX-enabled buffer.\r
+<dt>LiveGridMenu\r
+<dd>This loads the default grid menu. This menu provides access to all of the LiveGrid capabilities.\r
+It adjusts the selections presented to the user based on the column selected \r
+and the type of buffer used.\r
+You can also choose to use the grid with no menu at all, or to create your own menu\r
+customized to the needs of your application.\r
+<dt>greenHdg.css\r
+<dd>Rico comes with several sample grid styles: coffee-with-milk,\r
+grayedout, greenHdg, iegradient (Internet Explorer only), tanChisel, and warmfall. \r
+You may choose one of the included styles or create one of your own. \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
+at grid startup.\r
+<pre>\r
+var buffer = new Rico.Buffer.AjaxXML('/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
+<pre>\r
+<ajax-response>\r
+<response type='object' id='data_grid_updater'>\r
+<rows update_ui='true' offset='0'>\r
+<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>\r
+<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>\r
+</rows>\r
+</response>\r
+</ajax-response>\r
+</pre>\r
+\r
+<li>Finally, instantiate the LiveGrid, passing in the DOM id of the HTML table, \r
+the Rico.Buffer instance, and any options (columnSpecs is not required, \r
+but shown here as a placeholder for customization of the columns).\r
+<pre>\r
+var grid_options = { columnSpecs: [,] };\r
+var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+</pre>\r
+\r
+<li>Rico.loadModule may finish <em>after</em> the window.onload event.\r
+So to ensure that the grid initialization runs after the Rico modules\r
+have loaded, you must pass the initialization function to the\r
+Rico.onLoad method. Putting all of the javascript together would look like this:\r
+<pre>\r
+<script type='text/javascript'>\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 grid_options = { columnSpecs: [,] };\r
+ var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+});\r
+</script>\r
+</pre>\r
+</ul>\r
+\r
+\r
+<h2><a name='model4'>Usage Model 4: Loading data from an SQL database query</a></h2>\r
+\r
+<p>The descriptions below apply directly to the ASP and PHP implementations of the Rico LiveGrid plug-ins.\r
+The concepts are the same in .net, but the implementation is quite different \r
+(examine ex2simple.aspx to see how this gets implemented in .net).\r
+\r
+<ul>\r
+<li>Define a session variable that contains the query to be run. The variable name must\r
+match the id of the table below. When requesting data, the grid will pass its id \r
+to ricoXMLquery, and ricoXMLquery will use it to get the query text from\r
+the session variable.\r
+<ul>\r
+<li>ASP:\r
+<pre>\r
+<%\r
+session.contents("data_grid")="select ID,Name,City from customers"\r
+%>\r
+</pre>\r
+\r
+<li>PHP:\r
+<pre>\r
+<? \r
+$_SESSION['data_grid']="select ID,Name,City from customers";\r
+?>\r
+</pre>\r
+\r
+<li>.net:\r
+<pre>\r
+Sub Page_Load(Sender As object, e As EventArgs)\r
+ data_grid.sqlQuery="select ID,Name,City from customers"\r
+ ' session variable is set by the control\r
+End Sub\r
+</pre>\r
+</ul>\r
+\r
+\r
+<li>Define an HTML table, supplying the table header cells, but no table body cells.\r
+Including the markup for the bookmark will cause the grid's scroll position to be displayed.\r
+<pre>\r
+<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
+<table id="data_grid">\r
+ <tr>\r
+\r
+ <th>Customer #</th>\r
+ <th>Customer Name</th>\r
+ <th>City</th>\r
+\r
+ </tr>\r
+</table>\r
+</pre>\r
+\r
+<li>Load the Rico javascript and css files necessary to display the grid.\r
+<pre>\r
+Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
+</pre>\r
+<dl>\r
+<dt>LiveGridAjax\r
+<dd>This loads the Rico javascript and css files necessary to display a LiveGrid \r
+with an AJAX-enabled buffer.\r
+<dt>LiveGridMenu\r
+<dd>This loads the default grid menu. This menu provides access to all of the LiveGrid capabilities.\r
+It adjusts the selections presented to the user based on the column selected \r
+and the type of buffer used.\r
+You can also choose to use the grid with no menu at all, or to create your own menu\r
+customized to the needs of your application.\r
+<dt>greenHdg.css\r
+<dd>Rico comes with several sample grid styles: coffee-with-milk,\r
+grayedout, greenHdg, iegradient (Internet Explorer only), tanChisel, and warmfall. \r
+You may choose one of the included styles or create one of your own. \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
+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
+<pre>\r
+var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');\r
+</pre>\r
+\r
+The URL ("ricoXMLquery.asp" in this example) utilizes one of the included plug-ins to\r
+fetch data from the database and return it to the grid in this XML format:\r
+<pre>\r
+<ajax-response>\r
+<response type='object' id='data_grid_updater'>\r
+<rows update_ui='true' offset='0'>\r
+<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>\r
+<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>\r
+</rows>\r
+<rowcount>99</rowcount>\r
+</response>\r
+</ajax-response>\r
+</pre>\r
+\r
+The <rowcount> tag is optional, but should be returned whenever the "get_total"\r
+querystring parameter is present in the request.\r
+\r
+<li>Finally, instantiate the LiveGrid, passing in the DOM id of the HTML table, \r
+the Rico.Buffer instance, and any options (columnSpecs is not required, \r
+but shown here as a placeholder for customization of the columns).\r
+<pre>\r
+var grid_options = { columnSpecs: [,,] };\r
+var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+</pre>\r
+\r
+<li>Rico.loadModule may finish <em>after</em> the window.onload event.\r
+So to ensure that the grid initialization runs after the Rico modules\r
+have loaded, you must pass the initialization function to the\r
+Rico.onLoad method. Putting all of the javascript together would look like this:\r
+<pre>\r
+<script type='text/javascript'>\r
+Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
+\r
+Rico.onLoad( function() {\r
+ var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');\r
+ var grid_options = { columnSpecs: [,,] };\r
+ var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
+});\r
+</script>\r
+</pre>\r
+</ul>\r
+\r
+\r
+<h2><a name='model5'>Usage Model 5: Loading data using a custom callback function</a></h2>\r
+\r
+<p>This model works the same way as models 3 and 4 except that, rather than fetching\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
+\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
+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
+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
+\r
+function <strong>jsfetch</strong>(options) {\r
+ Rico.writeDebugMsg("jsfetch");\r
+ var newRows=[], offset=options.parameters.offset;\r
+ for (var r=0; r<100; r++) {\r
+ var row=[];\r
+ row.push(offset.toString());\r
+ row.push(new Date().toString());\r
+ for (var c=2; c<5; c++) row.push('cell '+r+':'+c);\r
+ newRows.push(row);\r
+ }\r
+ options.onComplete(newRows);
+}\r
+</pre>\r
+\r
+<p>The code that follows is taken from \r
+<a href='client/gridJSbuffer2.html'>examples/client/gridJSbuffer2.html</a>, \r
+which uses the AjaxSQL buffer. The "jsfetch" callback function\r
+simulates a 2-dimensional array that is 500 rows long by 5 columns wide.\r
+However, only a section of that array is returned during any one callback --\r
+just the rows from <code>options.parameters.offset</code> to\r
+<code>options.parameters.offset + options.parameters.page_size</code>.\r
+\r
+<pre>\r
+buffer=new Rico.Buffer.AjaxSQL(<strong>jsfetch</strong>);\r
+\r
+function <strong>jsfetch</strong>(options) {\r
+ var newRows=[], totrows=500;\r
+ var offset=options.parameters.offset;\r
+ var limit=Math.min(totrows-offset,options.parameters.page_size)\r
+ for (var r=0; r<limit; r++) {\r
+ var row=[];\r
+ row.push(new Date().toString());\r
+ row.push(offset.toString());\r
+ for (var c=2; c<5; c++) row.push('cell '+(r+offset)+':'+c);\r
+ newRows.push(row);\r
+ }\r
+ options.onComplete(newRows,false,totrows);
+}\r
+</pre>\r
+\r
+<p>options.onComplete takes the following parameters:\r
+<ul>\r
+<li>newRows - 2-dimensional array where each item is a string\r
+<li>newAttr - 2-dimensional array where each item is an object containing acceptAttr values for the cell,\r
+or false if acceptAttr is not being used\r
+<li>totalRows - an integer representing the total number of rows in the dataset\r
+<li>errMsg - if an error occurs, this is the message text to be displayed to the user\r
+</ul>\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
+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
+<pre style='margin:3px;'><textarea cols="100" rows="5" id="data_grid_debugmsgs" /></pre>\r
+then this textarea will be used for the message log.\r
+<li>Alternatively, the textarea may be designated by a call to Rico.setDebugArea()\r
+\r
+<pre>\r
+<textarea id='debug' rows='5' cols='80'></textarea>\r
+<script type='text/javascript'>\r
+Rico.setDebugArea('debug');\r
+</script>\r
+</pre>\r
+\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 Opera javascript console\r
+ <li>The Safari 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
+<pre>\r
+Rico.writeDebugMsg('My debug message');\r
+</pre>\r
+\r
+<h2>Grid Menus</h2>\r
+\r
+<p>Rico LiveGrids come with a lot of functionality built in. To access that functionality,\r
+Rico includes a default set of menus -- defined in ricoLiveGridMenu.js.\r
+To use the default menu, simply load the 'LiveGridMenu' module and then\r
+assign the grid's menu property to an instance of the Rico.GridMenu class.\r
+<pre>\r
+ Rico.loadModule('LiveGridMenu');\r
+ ...\r
+ var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
+ ex1.menu=new Rico.GridMenu();\r
+</pre>\r
+<p>By default, the menu will open when a user double-clicks on a grid cell.\r
+To change the event that opens the menu, assign a value to the grid's\r
+<a href='#menuEvent'>menuEvent</a> option. The following code will open the menu on a right-click:\r
+<pre>\r
+ Rico.loadModule('LiveGridMenu');\r
+ ...\r
+ var grid_options = {\r
+ menuEvent: 'contextmenu'\r
+ }\r
+ var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
+ ex1.menu=new Rico.GridMenu();\r
+</pre>\r
+<p>Rico.GridMenu provides a callback (dataMenuHandler) so that additional menu items can be added.\r
+The grid menu is always built dynamically -- customized to the row and column the user\r
+has clicked on. So the callback function is called every time the menu is invoked and\r
+must add the desired menu items at each invocation.\r
+<pre>\r
+ Rico.loadModule('LiveGridMenu');\r
+ ...\r
+ var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
+ ex1.menu=new Rico.GridMenu();\r
+ ex1.menu.options.dataMenuHandler=myCustomMenuItems;\r
+ ...\r
+function myCustomMenuItems(grid,r,c,onBlankRow) {\r
+ if (buffer.getWindowValue(r,c)=='Special Value')\r
+ grid.menu.addMenuItem("Special menu item", specialAction);
+}\r
+function specialAction() {\r
+ ...\r
+}
+</pre>\r
+\r
+<p>It is also possible to create completely custom menus. For an example,\r
+see ex5.php/asp/aspx.\r
+\r
+\r
+<h2>Notes</h2>\r
+\r
+<ul>\r
+<li>If you create an element with a DOM id matching the name of the LiveGrid table \r
+plus '_bookmark', it will be updated with text indicating \r
+the number of records displayed in the grid. The LiveGrid examples typically use\r
+this markup:\r
+<pre>\r
+<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
+</pre>\r
+<li>In order to display properly, a browser displaying a LiveGrid must be operating in \r
+<a href="http://www.quirksmode.org/css/quirksmode.html">strict (aka standards) mode</a>.\r
+Therefore, you must include a doctype declaration just before the \r
+<code> <html> </code> tag. For example:\r
+<pre>\r
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" \r
+ "http://www.w3.org/TR/html4/strict.dtd">\r
+</pre>\r
+</ul>\r
+\r
+\r
+<h2>Reference</h2>\r
+\r
+<h3>Constructor</h3>\r
+<pre>\r
+\r
+ var grid = new Rico.LiveGrid (table_id, rico_buffer, grid_options);\r
+\r
+</pre>\r
+\r
+<ul>\r
+<li><strong>table_id</strong> is the DOM id of the table (or div) that will be replaced by a LiveGrid\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.AjaxSQL\r
+ <li>Rico.Buffer.AjaxJSON\r
+ </ul>\r
+<li><strong>grid_options</strong> (see below)\r
+</ul>\r
+\r
+<h3><a name="options"></a>Options</h3>\r
+\r
+\r
+<h4>Grid Size</h4>\r
+<dl>\r
+<dt>visibleRows (rows in .net plug-in)\r
+<dd>How many rows of the grid are made visible?\r
+A positive integer specifies that the grid should always contain exactly that many rows.\r
+<p>Negative values have the following meanings:\r
+ <ul>\r
+ <li>-1: size grid to client window (default)\r
+ <li>-2: size grid to whichever is smaller: the client window or the data\r
+ <li>-3: size grid so that the page body does not have a scrollbar\r
+ <li>-4: size grid to the parent node in the DOM\r
+ </ul>\r
+<p>String values have the following meanings:\r
+ <ul>\r
+ <li>'window': size grid to client window (default)\r
+ <li>'data': size grid to whichever is smaller: the client window or the data\r
+ <li>'body': size grid so that the page body does not have a scrollbar\r
+ <li>'parent': size grid to the parent node in the DOM\r
+ <li>'XX%': size grid to XX percent of the total window height\r
+ <li>'XXpx': size grid to XX pixels\r
+ </ul>\r
+ \r
+<dt>minPageRows\r
+<dd>Minimum # of visible rows. Used only when visibleRows < 0. (default: 2 - after Rico 2b3, 1 - up to Rico 2b3)\r
+\r
+<dt>maxPageRows\r
+<dd>Maximum # of visible rows. Used only when visibleRows < 0. (default: 50)\r
+\r
+<dt><a name="defaultWidth"></a>defaultWidth\r
+<dd>An integer used in setting the initial width of columns. \r
+See the <a href='#width'>column width option</a> for an explanation.\r
+(default: -1 if initializing from an HTML table, 100 otherwise)\r
+\r
+<dt>scrollBarWidth\r
+<dd>For some calculations, LiveGrid needs to know the width of scrollbars on the page. (default: 19)\r
+\r
+<dt>minScrollWidth\r
+<dd>Minimum scroll area width in pixels when width of frozen columns exceeds window width. (default: 100)\r
+</dl>\r
+\r
+\r
+<h4>Grid Data</h4>\r
+<dl>\r
+<dt>offset<dd>First row of data to be displayed (default: 0)\r
+<dt>prefetchBuffer<dd>Load the buffer (and therefore the grid) on page load? (default: true)\r
+<dt>sortCol<dd>Name or index of column for initial sort\r
+<dt>sortDir<dd>Direction of initial sort\r
+ <br>possible values: 'ASC', 'DESC'\r
+<dt>getQueryParms<dd>If true, check the web page's query string for filter parameters and apply\r
+any filter that is found. Filter parameters must be of the form "f[x]=" where x is the column index.\r
+(default: false)\r
+</dl>\r
+\r
+<h4>Header Configuration</h4>\r
+<dl>\r
+<dt>frozenColumns\r
+<dd>number of columns on the left side of the grid that should be\r
+ frozen (like Excel). \r
+\r
+<dt>headingSort\r
+<dd>A string that defines how headings are displayed to facilitate sorting.\r
+ <ul>\r
+ <li>'link' -- make headings a link that will sort columns (default)\r
+ <li>'hover' -- user can click in any part of the heading cell to sort. \r
+ Heading changes background color when cursor hovers over cell.\r
+ <li>'none' -- events on headings are disabled\r
+ </ul>\r
+\r
+<dt>hdrIconsFirst\r
+<dd>Put sort and filter icons before or after header text (default: true)\r
+\r
+<dt><a name='allowColResize'>allowColResize</a>\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
+<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
+\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
+\r
+<dt>FilterAllToken\r
+<dd>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
+<dt><a name='saveColumnInfo'>saveColumnInfo</a>\r
+<dd>Specifies which details to save in the grid's cookie. Only one cookie is used for each grid.\r
+Note that the width setting includes the hide/show status of the column. \r
+(default: {width:true, filter:false, sort:false})\r
+<br>In the .net plug-in, this option is represented by 3 separate properties:\r
+saveColumnWidth, saveColumnFilter, saveColumnSort\r
+\r
+<dt>cookiePrefix\r
+<dd>A string that is prepended to the cookie name. (default: 'RicoGrid.')\r
+\r
+<dt>cookieDays\r
+<dd>Number of days before the cookie expires. \r
+If you don't specify it, then the cookie is only maintained for the current session. (default: null)\r
+\r
+<dt>cookiePath\r
+<dd>Sets the top level directory from which the grid cookie can be read.\r
+If you don't specify it, it becomes the path of the page that sets the cookie. (default: null)\r
+\r
+<dt>cookieDomain\r
+<dd>Tells the browser to which domain the cookie should be sent. \r
+If you don't specify it, it becomes the domain of the page that sets the cookie. (default: null)\r
+\r
+</dl>\r
+\r
+<h4>Highlighting and selection</h4>\r
+<dl>\r
+\r
+<dt>highlightElem\r
+<dd>a string that specifies what gets highlighted/selected\r
+ <ul>\r
+ <li>'cursorRow' -- the grid row under the cursor\r
+ <li>'cursorCell' -- the grid cell under the cursor\r
+ <li>'menuRow' -- the grid row where the menu is displayed\r
+ <li>'menuCell' -- the grid cell where the menu is displayed\r
+ <li>'selection' -- allow the user to select cells\r
+ <li>'none' -- never highlight\r
+ </ul>\r
+\r
+<dt>highlightSection\r
+<dd>an integer that specifies which section of the table is highlighted\r
+ <ul>\r
+ <li>1 -- frozen\r
+ <li>2 -- scrolling\r
+ <li>3 -- all (default)\r
+ <li>0 -- none\r
+ </ul>\r
+\r
+<dt>highlightMethod\r
+<dd>Method used to highlight cells & rows. Possible values:\r
+ <ul>\r
+ <li>'outline' -- least CPU-intensive on client-side\r
+ <li>'class' -- adds CSS class to highlighted cell/row (default)\r
+ <li>'both' -- highlight using both outline and class\r
+ </ul>\r
+\r
+<dt>highlightClass\r
+<dd>When highlighting by class, this is the class name used (default: 'ricoLG_selection')\r
+</dl>\r
+\r
+\r
+<h4>Export and print</h4>\r
+<dl>\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
+\r
+<dt>exportWindow\r
+<dd>Options string passed to <a href='http://www.w3schools.com/htmldom/met_win_open.asp'>window.open()</a>\r
+when the export window is created. (default: "height=400,width=500,scrollbars=1,menubar=1,resizable=1")\r
+\r
+<dt>exportStyleList\r
+<dd>An array of CSS attributes that will be extracted from the first visible row of the grid and used\r
+to format all rows of the exported table. \r
+(default: ['background-color', 'color', 'text-align', 'font-weight', 'font-size', 'font-family'])\r
+</dl>\r
+\r
+\r
+<h4>Behavior Defaults</h4>\r
+<dl>\r
+<dt><a name='canHideDefault'>canHideDefault</a>\r
+<dd>Controls whether columns can be hidden/shown (default: true). \r
+Hide/show can be disabled for individual columns using the <a href='#canHide'>canHide</a> property in columnSpecs.\r
+\r
+<dt><a name='canSortDefault'>canSortDefault</a>\r
+<dd>Controls whether columns can be sorted (default: true).\r
+Sorting can be disabled for individual columns using the <a href='#canSort'>canSort</a> property in columnSpecs.\r
+\r
+<dt><a name='canFilterDefault'>canFilterDefault</a>\r
+<dd>Controls whether columns can be filtered (default: true).\r
+Filtering can be disabled for individual columns using the <a href='#canFilter'>canFilter</a> property in columnSpecs.\r
+\r
+<dt><a name='dndMgrIdx'>dndMgrIdx</a>\r
+<dd>Specifies which drag-and-drop management zone should be used for drag operations (default: 0).\r
+This only needs to be specified if the web page uses multiple distinct zones.\r
+\r
+</dl>\r
+\r
+\r
+<h4>Event control</h4>\r
+<dl>\r
+<dt><a name='menuEvent'>menuEvent</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>'contextmenu' -- invoke menu on right-click\r
+ <li>'none' -- no pop-up menu\r
+ </ul>\r
+\r
+<dt>windowResize\r
+<dd>A boolean value specifying whether to resize the grid during a window.resize event.\r
+This should be set to false when the grid is embedded in an accordian. (default: true)\r
+</dl>\r
+\r
+\r
+<h4>Event handles</h4>\r
+<dl>\r
+<dt style='font-weight:normal;'>Event handlers cannot be passed in options to the constructor, but may be set after the LiveGrid has been constructed.\r
+<dt>sortHandler<dd> (default: Rico.LiveGridMethods.sortHandler -- bound)\r
+<dt>filterHandler<dd> (default: Rico.LiveGridMethods.filterHandler -- bound)\r
+<dt>onRefreshComplete<dd> (default: Rico.LiveGridMethods.bookmarkHandler -- bound)\r
+<dt>rowOverHandler<dd> (default: Rico.LiveGridMethods.rowMouseOver -- bound as event listener)\r
+<dt>mouseDownHandler<dd> (default: Rico.LiveGridMethods.selectMouseDown -- bound as event listener)\r
+<dt>mouseOverHandler<dd> (default: Rico.LiveGridMethods.selectMouseOver -- bound as event listener)\r
+<dt>mouseUpHandler<dd> (default: Rico.LiveGridMethods.selectMouseUp -- bound as event listener)\r
+<dt>onscroll<dd> called whenever the grid is scrolled vertically. (default: null)\r
+<dt>onscrollidle<dd> called 1.2 seconds after the grid is scrolled vertically. (default: null)\r
+<dt>click<dd> called when a grid cell is clicked. (default: null, unless menuEvent='click')\r
+<dt>dblclick<dd> called when a grid cell is double-clicked. (default: null, unless menuEvent='dblclick')\r
+<dt>contextmenu<dd> called when a grid cell is right-clicked. (default: null, unless menuEvent='contextmenu')\r
+</dl>\r
+\r
+<h4><a name="column"></a>Per-column configuration</h4>\r
+<dl>\r
+<dt style='font-weight:normal;'>Options for each individual column are contained in the columnSpecs option.\r
+columnSpecs is an array with an entry for each column. \r
+Each column entry can either be:\r
+<ul>\r
+\r
+<li>null (default) -- in which case the column is formatted according to the spec in Rico.TableColumn.DEFAULT.\r
+If most columns in your grid share common formatting, then it may make sense to override\r
+the default column spec for that grid:\r
+<pre>\r
+Rico.TableColumn.DEFAULT = {ClassName:'aligncenter', width:50};\r
+</pre>\r
+In this case, any column with no spec will have content aligned to the center and a width of 50 pixels.\r
+\r
+<li>a string -- provides a simple way to specify a column format.\r
+These values are built-in: DOLLAR, EURO, PERCENT, QTY, DEFAULT.\r
+It is also possible to define your own. This example, which defines a temperature format,\r
+is taken from weather.php:\r
+<pre>\r
+Rico.TableColumn.TEMP = {type:'number', decPlaces:0, \r
+ ClassName:'alignright', suffix:'&deg;C', width:50};\r
+var opts = { \r
+ frozenColumns : 1,
+ columnSpecs : [{width:120},{width:70},{width:70},{width:100},\r
+ 'TEMP','TEMP','TEMP',\r
+ {width:150},{width:200},{width:60}]\r
+};\r
+</pre>\r
+\r
+<li>an object -- containing entries for one or more of the properties listed below.\r
+Here is an example that contains specifications for columns 0, 1, and 3.\r
+Column 2 would get the default spec.\r
+<pre>\r
+columnSpecs : [{canSort:false, noResize:true, ClassName:'alignright'},\r
+ {ClassName:'aligncenter'},\r
+ ,\r
+ {visible:false}]\r
+</pre>\r
+</ul>\r
+\r
+<dt>Hdg\r
+<dd>An alternate way of specifying the heading text for a column.\r
+Only used by LiveGrid if the grid id refers to a <div> instead of an html table.\r
+\r
+<dt><a name='canSort'>canSort</a>\r
+<dd>Column can be sorted. (default: <a href='#canSortDefault'>grid.options.canSortDefault</a>)\r
+\r
+<dt><a name='canFilter'>canFilter</a>\r
+<dd>Column can be filtered. (default: <a href='#canFilterDefault'>grid.options.canFilterDefault</a>)\r
+\r
+<dt>canDrag\r
+<dd>Column cells can serve as the source for a drag-n-drop operation. The "DragAndDrop" module must be loaded. \r
+The temporary drag objects have a class of "LiveGridDraggable".\r
+For an example, see <a href='client/drag_and_drop_grid.html'>drag_and_drop_grid.html</a>. (default: false)\r
+\r
+<dt><a name='canHide'>canHide</a>\r
+<dd>Column can be hidden/unhidden. (default: <a href='#canHideDefault'>grid.options.canHideDefault</a>)\r
+\r
+<dt>visible\r
+<dd>Controls whether the column is visible at grid startup (default: true). \r
+If <a href='#saveColumnInfo'>grid.options.saveColumnInfo.width</a> is true\r
+and there is a value in the cookie for this column, the cookie value will take precedence.\r
+\r
+<dt><a name='width'>width</a>\r
+<dd>An integer specifying the initial width (in pixels) for the column. \r
+Here is the algorithm LiveGrid uses for setting the initial width of each column:\r
+<ol>\r
+<li>If <a href='#saveColumnInfo'>options.saveColumnInfo.width</a> is true and column information is present in the grid's cookie \r
+(due to the user previously performing a resize on that grid's column), \r
+then the width in the cookie is used. Otherwise...\r
+\r
+<li>If there is a width spec for the column in options.columnSpecs[], then the width in the spec is used. For an example, see ex3.php/asp/aspx. Otherwise...\r
+\r
+<li>If <a href='#defaultWidth'>options.defaultWidth</a> is true (default) and the grid header is initialized from an html table, then the column's width in the html table is used. \r
+You can usually control the column widths of the initial table by using col tags (e.g. <col style='width:40px;' >). \r
+If the total table width is less than the browser width then this works; however if it is greater, then the browser often ignores <col width> \r
+and tries to squeeze all of the columns into the available window width. Thus, using this method to set the column width is unreliable. Otherwise...\r
+\r
+<li>If <a href='#defaultWidth'>options.defaultWidth</a> is false, then the column's width is set to options.defaultWidth (which defaults to 100).\r
+</ol>\r
+Therefore, the most reliable way to set column widths in LiveGrid and SimpleGrid is to specify a width for every column in options.columnSpecs[]. \r
+If many columns share a common width, then you can shortcut this somewhat by setting options.defaultWidth=false, \r
+and setting options.defaultWidth to the common width.\r
+\r
+<dt><a name='noResize'>noResize</a>\r
+<dd>Allow column to be resized? (default <a href='#allowColResize'>grid.options.allowColResize</a> )\r
+\r
+<dt>ClassName\r
+<dd>By default, LiveGrid assigns a unique CSS class name to each\r
+column, which follows the naming convention: table_id + '_col' + column_index.\r
+For example, the fourth column in the grid 'mygrid' would have the class name\r
+'mygrid_col3'. The value of the ClassName option overrides this default name.\r
+The ClassName option is most commonly used to specify column alignment via the\r
+Rico-provided 'alignright' and 'aligncenter' classes. \r
+So, if you wanted the first 3 columns in your grid to be displayed with white\r
+text on a red background, you could do either of the following:\r
+\r
+<pre>\r
+In CSS:\r
+.mygrid_col0 div.ricoLG_cell, \r
+.mygrid_col1 div.ricoLG_cell, \r
+.mygrid_col2 div.ricoLG_cell {\r
+ color: white;\r
+ background-color: red;\r
+}\r
+</pre>\r
+\r
+OR\r
+\r
+<pre>\r
+In CSS:\r
+.WhiteOnRed div.ricoLG_cell {\r
+ color: white;\r
+ background-color: red;\r
+}\r
+\r
+In javascript:\r
+columnSpecs : [{ClassName:'WhiteOnRed'},\r
+ {ClassName:'WhiteOnRed'},\r
+ {ClassName:'WhiteOnRed'},\r
+ ...\r
+</pre>\r
+\r
+Finally, please note that this ClassName is not applied to the grid headings - \r
+use a align="right" on the <th> tag to accomplish the header alignment.\r
+\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>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
+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
+Any HTML markup gets copied into the cell.\r
+</ul>\r
+</dd>\r
+\r
+<dt><a name='control'></a>control\r
+<dd>An object that can be used to provide special formatting for a column.\r
+Several column controls are provided with LiveGrid. The code for them\r
+resides in ricoLiveGridControls.js. Here is a brief description of the\r
+provided controls:\r
+\r
+<dl style='font-size:smaller;'>\r
+<dt>Rico.TableColumn.checkboxKey(showKey)\r
+<dd>Display unique key column as: <checkbox> <key value>
+and keep track of which keys the user selects.
+Key values should not contain <, >, or &.
+\r
+<dt>Rico.TableColumn.checkbox(checkedValue, uncheckedValue, defaultValue, readOnly)\r
+<dd>Display column as checkboxes. Database column should contain only two-values (e.g. yes/no).
+The following code is taken from ex7 (column values are 1 and 0):\r
+<pre>\r
+columnSpecs: [{canHide:false,\r
+ control:new Rico.TableColumn.checkbox('1','0'),\r
+ ClassName:'aligncenter'},\r
+ 'specQty'],\r
+</pre>\r
+\r
+<dt>Rico.TableColumn.textbox(boxSize, boxMaxLen, readOnly)\r
+<dd>Display the column value in a text box.\r
+\r
+<dt>Rico.TableColumn.HighlightCell(chkcol,chkval,highlightColor,highlightBackground,chkop)\r
+<dd>Highlight a grid cell when a particular value is present in the specified column.\r
+chkop optionally specifies the comparison to be performed: ==, !=, <, <=, >, >=.\r
+If not specified, then == is used.\r
+The following code is taken from ex2highlight and highlights the entire row when column 1\r
+contains "HANAR":\r
+<pre>\r
+var CustId='HANAR';\r
+var CustIdCol=1;\r
+var highlight=Rico.TableColumn.HighlightCell;\r
+...\r
+columnSpecs: [\r
+{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') },\r
+{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') }]\r
+</pre>\r
+\r
+<dt>Rico.TableColumn.bgColor()\r
+<dd>Database value contains a css color name/value\r
+\r
+<dt>Rico.TableColumn.link(href,target)\r
+<dd>Database value contains a url to another page.\r
+The href parameter may contain references to grid values by including "{x}" in the string,\r
+where x is a column number. The following code is taken from ex6:\r
+<pre>\r
+columnSpecs: [,\r
+{control:new Rico.TableColumn.link('ex2.asp?id={0}','_blank'),\r
+ width:250},\r
+,'specQty']\r
+</pre>\r
+\r
+<dt>Rico.TableColumn.image()\r
+<dd>Database value contains a url to an image.\r
+The following code is taken from photos.php:\r
+<pre>\r
+imgctl=new Rico.TableColumn.image();\r
+...\r
+columnSpecs: [\r
+{control:imgctl,width:90},,,\r
+{type:'datetime'},{width:200}]\r
+</pre>\r
+\r
+<dt>Rico.TableColumn.lookup(map, defaultCode, defaultDesc)\r
+<dd>Map a database value to a display value\r
+\r
+<dt>Rico.TableColumn.MultiLine()\r
+<dd>Overcomes issues when displaying multi-line content (i.e. content with <br> tags) in IE6 and IE7\r
+\r
+</dl>\r
+\r
+<br>It is also possible to write your own column control, which\r
+implements logic specific to your application. Here is an example:\r
+<pre>\r
+// Display values white on black if\r
+// first column contains the value "reverse"\r
+// Usage: { control:new MyCustomColumn() }
+MyCustomColumn = Class.create();
+
+MyCustomColumn.prototype = {
+ initialize: function() {},
+
+ _clear: function(gridCell,windowRow) {
+ gridCell.style.color='';
+ gridCell.style.backgroundColor='';
+ gridCell.innerHTML='&nbsp;';
+ },
+
+ _display: function(v,gridCell,windowRow) {
+ var col0=this.liveGrid.buffer.getWindowValue(windowRow,0);\r
+ if (col0=="reverse") {\r
+ gridCell.style.color='white';
+ gridCell.style.backgroundColor='black';\r
+ } else {\r
+ gridCell.style.color='';
+ gridCell.style.backgroundColor='';
+ }
+ gridCell.innerHTML=this._format(v);
+ }
+}
+</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
+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
+<pre>\r
+filterUI:'t^20' \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
+</ul>\r
+\r
+<dt></a>filterCol\r
+<dd>Specifies that the filter should be applied to a different column. For example, ex3livegrid.asp/aspx/php\r
+uses this feature to filter the order and ship date columns by year. The full date is shown in the column\r
+in which the filter appears; however, there is another hidden, calculated column containing "year(orderdate)"\r
+to which the filter is applied.\r
+</dl>\r
+\r
+<dl>\r
+<dt style='color:navy;'><a name='NumberFormatting'></a><em>Number formatting:</em>\r
+\r
+<dt>multiplier\r
+<dd>The value is multiplied by this number before it is displayed. (default: 1)\r
+\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
+\r
+<dt>negSign\r
+<dd>Specifies how negative numbers should be displayed. Possible values:\r
+<ul>\r
+<li>L=leading minus (default)\r
+<li>T=trailing minus\r
+<li>P=parentheses\r
+</ul>\r
+\r
+<dt>prefix\r
+<dd>A string added to the beginning of the number. Typically a currency symbol.\r
+\r
+<dt>suffix\r
+<dd>A string added to the end of a number. For example, a "%" symbol.</dd>\r
+</dl>\r
+\r
+<dl>\r
+<dt style='color:navy;'><a name='DateFormatting'></a><em>Date formatting:</em>\r
+\r
+<dt>dateFmt\r
+<dd>A string specifying how the date or datetime should be displayed. Default is "translateDate", which means\r
+that the dateFmt and timeFmt strings in the RicoTranslate object are used \r
+(this defaults to "mm/dd/yyyy" for dates and "mm/dd/yyyy hh:nn:ss a/pm" for datetimes, \r
+but is overridden by the various language translation files). \r
+If dateFmt="localeDate", then the value is formatted using javascript's built-in toLocaleDateString() function. \r
+If dateFmt="localeDateTime", then the value is formatted using javascript's built-in toLocaleString() function. \r
+The dateFmt string may contain the following special character sequences:\r
+\r
+<ul>\r
+<li>yyyy - 4 digit year
+<li>yy - 2 digit year
+<li>mmmm - month name
+<li>mmm - 3 character month name abbreviation. In Asian languages this often doesn't make sense - in these cases it returns the full month name (same as mmmm).
+<li>mm - 2 digit month number (zero padded)
+<li>m - 1 or 2 digit month number
+<li>dddd - day-of-the-week
+<li>ddd - 3 character day-of-the-week abbreviation
+<li>dd - 2 digit day number (zero padded)
+<li>d - 1 or 2 digit day number
+<li>hh - 2 digit hour, 12-hour clock (zero padded)
+<li>h - 1 or 2 digit hour, 12-hour clock
+<li>HH - 2 digit hour, 24-hour clock (zero padded)
+<li>H - 1 or 2 digit hour, 24-hour clock
+<li>nn - 2 digit minutes (zero padded)
+<li>ss - 2 digit seconds (zero padded)
+<li>a/p - a or p (for am or pm)
+</ul>\r
+\r
+<pre>\r
+// display first column as "month year"\r
+columnSpecs : [{type:date, dateFmt:'mmm yyyy'}]\r
+</pre>\r
+</dd>\r
+\r
+<dt>prefix\r
+<dd>A string added to the beginning of the date.\r
+\r
+<dt>suffix\r
+<dd>A string added to the end of a date. For example, you could use this to include a time zone:\r
+<pre>\r
+// indicate that times are GMT/UTC\r
+columnSpecs : [{type:datetime, suffix:' UTC'}]\r
+</pre>\r
+</dl>\r
+\r
+</body>\r
+</html>\r
projects / infodrom / rico3 / blobdiff