Creating a Rico SimpleGrid

View this page in Japanese View this page in Japanese

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?

SimpleGrids can be created either of two ways:

  1. By using one of the SimpleGrid plug-ins. Plug-ins exist for PHP, ASP, and .net.
  2. 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.

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">

     <tr id="customer_livegrid_main">
        <th class="ricoFrozen">ID</th>

    <!-- grid data -->

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">

function ricoInit() {
  try {
  } catch(e) { alert(e.message); }

var grid1
function ricoInit2() {
  try {
  grid1=new Rico.SimpleGrid ('test1',{maxHt:180});
  } catch(e) { alert(e.message); }



  var grid = new Rico.SimpleGrid (table_id, grid_options);


General options

Number of frozen columns on the left side of the grid (default: 0)
Maximum height of a SimpleGrid in pixels. (default: null)
Resize grid on window.resize event? Set to false when embedded in an Accordian. (default: true)
Use column widths in source html table when configuring the grid? (default: true)
Used in positioning, does not actually change the width of the scrollbar. (default: 19)
When the width of the frozen columns exceeds the client window width, how wide should the total width of the scrolling columns be?
What gets highlighted in the grid. Possible values:
Option string that gets passed to when the user exports data from the grid. (default: "height=300,width=500,scrollbars=1,menubar=1,resizable=1")
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'])
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)
Boolean value that specifies whether form fields should be included in the export. (default: true)


Image to use for column resize handle. (default: 'resize.gif')
Image to use to indicate that the column is sorted in ascending order. (default: 'sort_asc.gif')
Image to use to indicate that the column is sorted in descending order. (default: 'sort_desc.gif')

Menu and event-handling options

Action to take when the user right-clicks on a grid cell (default: null)
Event that triggers menus. Possible values:
Action to take when the user single-clicks on a grid cell (default: null)
Action to take when the user double-clicks on a grid cell (default: null)

Cookie options

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})
A string that is prepended to the cookie name. (default: 'RicoGrid.')
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)
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)
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.
Are columns sortable by default? (LiveGrid default: true, SimpleGrid default: false)
Can the column be filtered? (LiveGrid default: RicoBuffer.options.canFilter, SimpleGrid default: false)
Columns can be hidden/unhidden (default: true)
Allow user to resize columns (default: true)
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:

Here is an example that contains specifications for columns 0, 1, and 3:

columnSpecs : [{noResize:true, ClassName:'alignright'},
Column can be hidden/unhidden. (default: grid.options.canHideDefault)
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)
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)
Allow column to be resized? (default grid.options.allowColResize )
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)