--- /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 SimpleGrid</title>\r
+<link href="ricoDocs.css" rel="Stylesheet" type="text/css">
+</head>\r
+\r
+<body>\r
+<h1>Creating a Rico SimpleGrid</h1>\r
+\r
+<p><a href='SimpleGrid_ja.html'><img src='images/japanese.gif' alt='View this page in Japanese'></a>\r
+<a href='SimpleGrid_ja.html'>View this page in Japanese</a></p>\r
+\r
+<p>SimpleGrid's are new to Rico 2.0 and share some of the same functionality as LiveGrids - \r
+resizable columns, frozen columns, and frozen headings. \r
+However, unlike a LiveGrid, the data is static and resides in the DOM -\r
+so no buffering, no AJAX refreshes, no sorting, no filtering.\r
+Why would you use a SimpleGrid? \r
+<ul>\r
+<li>Because it is more flexible in what each cell can contain - \r
+cells in a column do not all have to be of the same type.\r
+<li>In some circumstances, it can perform better on the client than LiveGrid; \r
+particularly on a slow client and there are many columns in the grid.\r
+<li>Finally, a SimpleGrid can contain input elements (checkboxes, select lists, etc). \r
+While a LiveGrid can also contain input elements, because the element values are stored in the\r
+LiveGrid buffer, submitting the values back to the server can be tricky.\r
+SimpleGrids do not suffer from this problem. You can simply surround the\r
+entire grid with standard <code><form>...</form></code> tags and any\r
+input elements within the grid will be submitted back to the server.\r
+</ul>\r
+\r
+<p>SimpleGrids can be created either of two ways:\r
+<ol>\r
+<li>By using one of the SimpleGrid plug-ins. Plug-ins exist for PHP, ASP, and .net.\r
+<li>By using XSLT. Rico includes an XSL file that will convert a standard\r
+HTML table to a SimpleGrid.\r
+</ol>\r
+\r
+<h2>Usage Model 1: Using a SimpleGrid plug-in</h2>\r
+<p>This section describes the examples simplegrid.php/asp/aspx, \r
+which are included in the Rico distribution.\r
+<ul>\r
+<li>In PHP:\r
+<ul>\r
+<li>First, create a reference to the SimpleGrid plug-in:\r
+<pre>\r
+require "../../plugins/php/SimpleGrid.php";\r
+</pre>\r
+<li>Create an instance of the SimpleGrid plug-in class (server side):\r
+<pre>\r
+$grid=new SimpleGrid();\r
+</pre>\r
+\r
+<li>Create the grid's headings. Passing 'true' to AddHeadingRow indicates\r
+that this is the main heading row - the one that will get the resizers.\r
+The number of columns in the main heading row <em>must</em> be the same\r
+as the number of data columns. Other heading rows may include "colspan" tags\r
+to cover multiple columns. If you have multiple heading rows, one and only one\r
+row may be designated as the main row.\r
+<pre>\r
+$grid->AddHeadingRow(true);\r
+for ($c=1; $c<=$numcol; $c++) {\r
+ $grid->AddCell("Column $c");\r
+}\r
+</pre>\r
+\r
+<li>Populate the grid's data section. Call AddDataRow() everywhere you would normally\r
+place a <code><tr></code> tag in a standard html table. Call AddCell() everywhere you would\r
+place a <code><td></code> tag.\r
+<pre>\r
+for ($r=1; $r<=100; $r++) {\r
+ $grid->AddDataRow();\r
+ $grid->AddCell($r);\r
+ for ($c=2; $c<=$numcol; $c++) {\r
+ $grid->AddCell("Cell $r:$c");\r
+ }\r
+}\r
+</pre>\r
+\r
+<li>Render the table (generate the html output). The first parameter is the grid id, and the\r
+second parameter is the number of frozen columns.\r
+<pre>\r
+$grid->Render("ex1", 1);\r
+</pre>\r
+\r
+</ul>\r
+\r
+<li>In ASP:\r
+<ul>\r
+<li>First, create a reference to the SimpleGrid plug-in:\r
+<pre>\r
+<!-- #INCLUDE FILE = "../../plugins/asp/SimpleGrid.vbs" -->\r
+</pre>\r
+\r
+<li>Create an instance of the SimpleGrid plug-in class (server side):\r
+<pre>\r
+set grid=new SimpleGrid\r
+</pre>\r
+\r
+<li>Create the grid's headings. Passing 'true' to AddHeadingRow indicates\r
+that this is the main heading row - the one that will get the resizers.\r
+The number of columns in the main heading row <em>must</em> be the same\r
+as the number of data columns. Other heading rows may include "colspan" tags\r
+to cover multiple columns. If you have multiple heading rows, one and only one\r
+row may be designated as the main row.\r
+<pre>\r
+grid.AddHeadingRow true\r
+for c=1 to numcol\r
+ grid.AddCell "Column " & c\r
+next\r
+</pre>\r
+\r
+<li>Populate the grid's data section. Call AddDataRow() everywhere you would normally\r
+place a <code><tr></code> tag in a standard html table. Call AddCell() everywhere you would\r
+place a <code><td></code> tag.\r
+<pre>\r
+for r=1 to 100\r
+ grid.AddDataRow\r
+ grid.AddCell r\r
+ for c=2 to numcol\r
+ grid.AddCell "Cell " & r & ":" & c\r
+ next\r
+next\r
+</pre>\r
+\r
+<li>Render the table (generate the html output). The first parameter is the grid id, and the\r
+second parameter is the number of frozen columns.\r
+<pre>\r
+grid.Render "ex1", 1\r
+</pre>\r
+</ul>\r
+\r
+<li>In .net:\r
+<ul>\r
+<li>First, create a reference to the SimpleGrid plug-in:\r
+<pre>\r
+<%@ Register TagPrefix="Rico" TagName="SimpleGrid" \r
+ Src="../../plugins/dotnet/SimpleGrid.ascx" %>\r
+</pre>\r
+\r
+<li>Create an instance of the SimpleGrid plug-in class (server side):\r
+<pre>\r
+<Rico:SimpleGrid runat='server' id='ex1' FrozenCols='1' />\r
+</pre>\r
+\r
+<li>Create the grid's headings - usually within the Page_Load event. \r
+Passing 'true' to AddHeadingRow indicates\r
+that this is the main heading row - the one that will get the resizers.\r
+The number of columns in the main heading row <em>must</em> be the same\r
+as the number of data columns. Other heading rows may include "colspan" tags\r
+to cover multiple columns. If you have multiple heading rows, one and only one\r
+row may be designated as the main row.\r
+<pre>\r
+ ex1.AddHeadingRow(true)\r
+ for c=1 to numcol\r
+ ex1.AddCell("Column " & c)\r
+ next\r
+</pre>\r
+\r
+<li>Populate the grid's data section. Call AddDataRow() everywhere you would normally\r
+place a <code><tr></code> tag in a standard html table. Call AddCell() everywhere you would\r
+place a <code><td></code> tag.\r
+<pre>\r
+ for r=1 to 100\r
+ ex1.AddDataRow()\r
+ ex1.AddCell(r)\r
+ for c=2 to numcol\r
+ ex1.AddCell("Cell " & r & ":" & c)\r
+ next\r
+ next\r
+</pre>\r
+\r
+<li>Unlike the other plug-ins, rendering happens automatically in the .net control.\r
+</ul>\r
+\r
+<li>Finally, regardless of the plug-in used, you need to \r
+initialize the javascript SimpleGrid object (client side):\r
+<pre>\r
+<script type='text/javascript'>\r
+Rico.loadModule('SimpleGrid','greenHdg.css');\r
+\r
+Rico.onLoad( function() {\r
+ var opts = { \r
+ columnSpecs: ['specQty'] // display first column as a numeric quantity\r
+ };\r
+ var ex1=new Rico.SimpleGrid ('ex1', opts);\r
+});\r
+</script>\r
+</pre>\r
+\r
+</ul>\r
+\r
+\r
+<h2>Usage Model 2: Using the XSLT transform</h2>\r
+\r
+<p>If your web page is XHTML compliant, then it is possible to turn a standard html table\r
+on that page into a SimpleGrid using the XSL stylesheet "ricoSimpleGrid.xsl". \r
+At one time, Rico supported doing this\r
+transformation on the client; however, due to changes in the Prototype library, this\r
+is no longer possible. Therefore, if you choose to use this approach, the XSLT transform\r
+<em>must</em> be performed on the server. Instructions for doing a server-side transform:\r
+<ul>\r
+<li><a href="http://www.php.net/manual/en/ref.xsl.php">using PHP5</a>\r
+<li><a href="http://www.topxml.com/dotnet/articles/xslt/default.asp">using .net</a>\r
+</ul>\r
+\r
+<p>The tranform will only convert tables with a class of "ricoSimpleGrid".\r
+<pre>\r
+<table id='test1' class='ricoSimpleGrid'>\r
+</pre>\r
+\r
+<p>Headings for frozen columns must have class="ricoFrozen"\r
+in the <code><th></code> tag. If there are multiple heading rows,\r
+then the main heading row should have an id ending in "_main" (this is the\r
+row that will display resizing handles). The transform\r
+will look for grid headings in the table's <code><thead></code> section.\r
+If no thead section exists, then the transform will assume the first row of the table\r
+is the heading row.\r
+<pre>\r
+<table id="test1" class="ricoSimpleGrid">\r
+\r
+ <thead>\r
+ <tr id="customer_livegrid_main">\r
+ <th class="ricoFrozen">ID</th>\r
+ <th>Customer</th>\r
+ <th>Address</th>\r
+ <th>City</th>\r
+ </tr>\r
+ </thead>\r
+\r
+ <tbody>\r
+ <!-- grid data -->\r
+ </tbody>\r
+</table>\r
+</pre>\r
+\r
+<p>Finally, the SimpleGrid javascript object must be declared and initialized in a CDATA section.\r
+The call to ricoInit() is generated by the XSLT transform.\r
+<pre>\r
+<script type="text/javascript">\r
+//<![CDATA[\r
+\r
+function ricoInit() {\r
+ try {\r
+ Rico.loadModule('SimpleGrid');\r
+ Rico.onLoad(ricoInit2);\r
+ } catch(e) { alert(e.message); }\r
+}\r
+\r
+var grid1\r
+function ricoInit2() {\r
+ try {\r
+ grid1=new Rico.SimpleGrid ('test1',{maxHt:180});\r
+ } catch(e) { alert(e.message); }\r
+}\r
+//]]>\r
+</script>\r
+</pre>\r
+\r
+\r
+\r
+<h2>Reference</h2>\r
+\r
+<h3>Constructor</h3>\r
+<pre>\r
+\r
+ var grid = new Rico.SimpleGrid (table_id, grid_options);\r
+\r
+</pre>\r
+<ul><li><strong>table_id</strong> is the DOM id of the table to be populated by LiveGrid\r
+<li><strong>grid_options</strong> (see below)\r
+</ul>\r
+\r
+<h3>Options</h3>\r
+<h4>General options</h4>\r
+<dl>\r
+\r
+<dt>frozenColumns\r
+<dd>Number of frozen columns on the left side of the grid (default: 0)\r
+\r
+<dt>maxHt\r
+<dd>Maximum height of a SimpleGrid in pixels. (default: null)\r
+\r
+<dt>windowResize\r
+<dd>Resize grid on window.resize event?\r
+Set to false when embedded in an Accordian. (default: true)\r
+\r
+<dt>useUnformattedColWidth\r
+<dd>Use column widths in source html table when configuring the grid? (default: true)\r
+\r
+<dt>scrollBarWidth\r
+<dd>Used in positioning, does not actually change the width of the scrollbar. (default: 19)\r
+\r
+<dt>minScrollWidth\r
+<dd>When the width of the frozen columns exceeds the client window width, \r
+how wide should the total width of the scrolling columns be?\r
+\r
+<dt>highlightElem\r
+<dd>What gets highlighted in the grid. Possible values: \r
+<ul>\r
+<li>cursorRow - the grid row under the cursor\r
+<li>cursorCell - the grid cell under the cursor\r
+<li>menuRow - the relevant row when the user opens the grid's context menu\r
+<li>menuCell - the relevant cell when the user opens the grid's context menu\r
+<li>selection - the cells selected by the user\r
+<li>none - nothing is highlighted (default)\r
+</ul>\r
+\r
+<dt>exportWindow\r
+<dd>Option string that gets passed to window.open() when the user exports data from the grid.\r
+(default: "height=300,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 each cell in the grid\r
+and used to format the exported table. \r
+(default: ['background-color', 'color', 'text-align', 'font-weight', 'font-size', 'font-family'])\r
+\r
+<dt>exportImgTags\r
+<dd>Boolean value that specifies whether img text should be included in the export. img text\r
+is the alt text if it exists, otherwise it is the title text, otherwise it is the src value. (default: true)\r
+\r
+<dt>exportFormFields\r
+<dd>Boolean value that specifies whether form fields should be included in the export. (default: true)\r
+</dl>\r
+\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
+</dl>\r
+\r
+\r
+<h4>Menu and event-handling options</h4>\r
+<dl>\r
+\r
+<dt>contextmenu\r
+<dd>Action to take when the user right-clicks on a grid cell (default: null)\r
+\r
+<dt>menuEvent\r
+<dd>Event that triggers menus. Possible values: \r
+<ul>\r
+<li>click\r
+<li>dblclick (default)\r
+<li>contextmenu\r
+<li>none\r
+</ul>\r
+\r
+<dt>click\r
+<dd>Action to take when the user single-clicks on a grid cell (default: null)\r
+\r
+<dt>dblclick\r
+<dd>Action to take when the user double-clicks on a grid cell (default: null)\r
+\r
+</dl>\r
+\r
+<h4>Cookie options</h4>\r
+<dl>\r
+\r
+<dt>saveColumnInfo\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
+\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>Column defaults</h4>\r
+<dl>\r
+<dt style='font-weight:normal;'>Each of these items can be overridden \r
+on a per-column basis via the columnSpecs option.\r
+\r
+<dt>canSortDefault\r
+<dd>Are columns sortable by default? (LiveGrid default: true, SimpleGrid default: false)\r
+\r
+<dt>canFilterDefault\r
+<dd>Can the column be filtered? \r
+(LiveGrid default: RicoBuffer.options.canFilter, SimpleGrid default: false) \r
+\r
+<dt>canHideDefault\r
+<dd>Columns can be hidden/unhidden (default: true)\r
+\r
+<dt>allowColResize\r
+<dd>Allow user to resize columns (default: true)\r
+\r
+<dt>defaultWidth\r
+<dd>Default width of each column in pixels (default: 100)\r
+\r
+</dl>\r
+\r
+<h4>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
+<li>null (default) -- in which case the column is formatted according to the spec in Rico.TableColumn.DEFAULT.\r
+<li>a string -- specifying one of the pre-defined formats: QTY, PERCENT, DOLLAR, or EURO\r
+<li>an object -- containing entries for one or more of the properties listed below.\r
+</ul>\r
+<p>Here is an example that contains specifications for columns 0, 1, and 3:\r
+<pre>\r
+columnSpecs : [{noResize:true, ClassName:'alignright'},\r
+ {ClassName:'aligncenter'},\r
+ ,\r
+ {visible:false}]\r
+</pre>\r
+\r
+<dt>canHide\r
+<dd>Column can be hidden/unhidden. (default: grid.options.canHideDefault)\r
+\r
+<dt>visible\r
+<dd>Column is initially unhidden. If grid.options.saveColumnInfo.width is true\r
+and there is a value in the cookie for this column, the cookie value will take precedence.\r
+(default: true)\r
+\r
+<dt>width\r
+<dd>Initial width for column. If grid.options.saveColumnInfo.width is true\r
+and there is a value in the cookie for this column, the cookie value will take precedence.\r
+(default: grid.options.defaultWidth)\r
+\r
+<dt>noResize\r
+<dd>Allow column to be resized? (default grid.options.allowColResize )\r
+\r
+<dt>ClassName\r
+<dd>Set this to 'alignright' or 'aligncenter' as needed - see example. \r
+Note that this does not align the header - \r
+use a align="right" on the <th> line to accomplish the header alignment.\r
+(default: table_id + '_col' + column_index)\r
+\r
+</dl>\r
+\r
+</body>\r
+</html>\r
projects / infodrom / rico3 / blobdiff