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?

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

  <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);

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

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)