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:

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.

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

• using PHP5
• using .net

<table id='test1' class='ricoSimpleGrid'>

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

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

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