Grid Component

The grid component is simple component, similar to the WebForms Repeater in style. It can take an IEnumerable data source and render it on the view. The Grid Component is intentionally very simple and bare bones components, it has very few capabilities, but it is very flexible.
It handles rendering of sections, alternate lines, and pagination (using IPaginatedPage) automatically, but it leaves all the markup generation to the user.

Pagination support 

Pagination support it provided for any data source that implements IPaginatedPage, you can use PaginationHelper.CreatePagination() in order to convert any IEnumerable data source to IPaginatedPage.
When the grid detects that the data source implements IPaginatedPage, it will generate the pagination automatically. You can override this using the pagination section or the paginationLink section.

Component parameters: 

The grid component has a single required parameter:

 source - required

This parameter is the data source that will be processed by the grid. The only requirement is that it should implement IEnumerable.

Example:

component Grid, { @source: users }:

Component Sections:

The gird component supports the following sections:

header - Required

Should render the header columns of the table.

Example:

section header:
%>
  <tr>
     <th>Name</th>
     <th>Email</th>
  </tr>
<%

end

Parameters: none

 item - Required

Should render the current row.

Example:

section item:
%>
  <tr>
    <td class="normal_row">${item.Name}</td>
    <td class="normal_row">${item.Email}</td>
  </tr>
<%
end

Parameters:

• item - the current item for the row, you can access its properties for the values to display

alternateItem - optional

Should render the current row, alternated. This allows to use alternating colors in the grid. If the alternateItem section exists, it is used to render every other row, and the item section is used to render the rest of the rows.

Example:

section alternateItem:
 %>
   <tr>
      <td class="alternate_row">${item.Name}</td>
      <td class="alternate_row">${item.Email}</td>
  </tr>

<%

end

Parameters:

• item - the current item for the row, you can access its properties for the values to display

 footer - optional

Should render the footer of the table. Possible uses may include adding a "add new" link at the bottom of the grid.

Example:

section footer:
%>
  <tr>
     <td>&nsbp;</td>
     <td> ${ Html.LinkTo('Add New', 'Users', 'Create') } </td>
  </tr>
<%
end

Parameters: none

 empty - optional

 This section will be rendered if the data source for the grid is empty. If it does not exists, the grid will render "grid has not data".

Example:

section empty:
%>
  <b> No data here, why don't you add some? </b>
<%
end

Parameters: none

 tableStart - optional

 Allows to customize the <table> opening tag of the grid, by default, the grid will render:

<table class='grid' cellspacing='0' cellpadding='0'>

Example:

section tableStart:
%>
 <div id="theGrid">
   <table border="2" class="myGridClass">
<%
end

  Parameters: none

 tableEnd - optional

 Allows to customer the </table> closing tag of the grid. By default, the grid will render:

</table>

Useful if you did anything out of the ordinary in the tableStart section. Note that it is recommended that you will use the footer section in order to put additional items into the end of the table.

Example:

section tableEnd:
%>
  </table>
</div>
<%
end

Parameters: none

pagination - optional

 This section is only rendered if the data source for the grid implements IPaginatedPage. If this section does not exist, the grid will render output similar to the following:

Showing 1 - 15 of 34                       first | previous | next | last

Example:

section pagination:
 component DiggStylePagination, {@page: currentPage }
end

Parameters:

• currentPage - the data source, basically. It allows you to called the HasFirst, HasNext, etc on the parameter, or, as shown above, to pass the parameter to another view component.

paginationLink - optional

The paginationLink section is render when the default pagination in the grid component it called, and it allows you to customize the pagination link behavior. The default behavior is to simply call PaginationHelper.CreatePageLink() to render the link.

Example: 

section paginationLink:
%>
   <a href="http://using.castleproject.org/pages/editpage.action#" onClick="doPaging( ${pageIndex} );return false;"> ${title} </a>
<%
end

 Parameters:

• pageIndex - the page index for the current link
• title - the title of the link, will usually be one of "first", "last", "next", "prev" 

Full sample

<?brail
component GridComponent, {'source':subjects}:
    section header:
?>
    <th id='header'>Id</th>
    <th id='header'>Name</th>
    <th id='header'>Browse</th>
    <?brail
    end
    section item:
?>
    <tr class='item'>
        <td>${item.Id}</td>
        <td>${item.Name}</td>
        <td>${ Html.LinkTo('Browse','faq','showQuestions', item.Id) }</td>
    </tr>
    <?brail
    end
    section alternateItem:
?>
    <tr class='alternateItem'>
        <td>${item.Id}</td>
        <td>${item.Name}</td>
        <td>${ Html.LinkTo('Browse','faq','showQuestions', item.Id) }</td>
    </tr>
    <?brail
    end
    section paginationLink:
?>
    <a href='/faq/index.rails?page=${pageIndex}'
       onclick='paging(${pageIndex});return false;'>${title}</a>
    <?brail
    end
end
 ?>