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