Id	First Name	Surname	Start Date	Action
3	ACMEfsgdfg	Sprat	Jun 13, 2007	View
1	Cool	Dumpty	Dec 19, 2020	View
4	Jill	Spill	Feb 22, 2008	View
5	Jim	Spoon	Feb 29, 2008	View

GridBeanModel1.tml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/tables/linkinggrid.css}"/>
</head>
<body>
    <h1>Grid BeanModel (1)</h1>
    
    We can take more control of the Grid when we provide the BeanModel ourselves.  It is a model that defines how 
    data will be mapped into the grid.  It does not contain the data.

    <div class="eg">
        <table t:type="grid" t:source="persons" t:row="person" t:model="mymodel" t:rowsPerPage="4" t:pagerPosition="top">[Grid here]
            <p:actionCell>
                <a t:type="pagelink" t:page="examples/tables/GridBeanModel2" t:context="person.firstName" href="#">View</a>
            </p:actionCell>
        </table>
     </div>

    To see manipulation of the BeanModel by a mixin, go to the Creating Mixins example.<br/><br/>

    References: 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Grid.html">Grid</a>, 
    <a href="http://tapestry.apache.org/beaneditform-guide.html#BeanEditFormGuide-CustomizingtheBeanModel">Customizing the BeanModel</a>, 
    <a href="http://tapestry.apache.org/beaneditform-guide.html#BeanEditFormGuide-ProvidingtheBeanModel">Providing the BeanModel</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/services/BeanModelSource.html">BeanModelSource</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/beaneditor/BeanModel.html">BeanModel</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/beaneditor/PropertyModel.html">PropertyModel</a>.<br/><br/>
    
    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    
    The source for Person, PersonFinderService, @EJB handling, etc. is shown in the @EJB example.<br/><br/>

    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/GridBeanModel1.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/GridBeanModel1.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/tables/linkinggrid.css"/>
</body>
</html>

GridBeanModel1.java


package jumpstart.web.pages.examples.tables;

import java.util.List;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;

import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.beaneditor.BeanModel;
import org.apache.tapestry5.ioc.Messages;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.BeanModelSource;

public class GridBeanModel1 {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    @Property
    private List<Person> persons;

    @Property
    private Person person;

    @Property
    private BeanModel<Person> myModel;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @Inject
    private BeanModelSource beanModelSource;

    @Inject
    private Messages messages;

    // The code

    void setupRender() {

        myModel = beanModelSource.createDisplayModel(Person.class, messages);
        myModel.add("action", null);
        myModel.include("id", "firstName", "lastName", "startDate", "action");
        myModel.get("firstName").sortable(false);
        myModel.get("lastName").label("Surname");

        // Get all persons - ask business service to find them (from the database)
        persons = personFinderService.findPersons(MAX_RESULTS);
    }
}

linkinggrid.css


body            { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
                    line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */

.eg             { margin: 20px 0; padding: 20px; 
                    border: 1px solid #ddd; border-radius: 4px; -webkit-border-radius: 4px; -mox-border-radius: 4px; }

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

/* 
    The following elements demonstrate one way to override Tapestry's Grid CSS.
    Another way is to assign a your own CSS class in Grid's class parameter. 
*/ 

.eg img.t-sort-icon         { vertical-align: bottom; }
.eg div.t-data-grid         { font-family: Arial, Helvetica, sans-serif; }
.eg div.t-data-grid-pager   { margin: 0 0 8px; }
.eg div.t-data-grid-pager a, 
.eg div.t-data-grid-pager span.current  { font-size: 13px; }
.eg div.t-data-grid-pager span.current  { text-shadow: 0px -1px 0px #4D5F99; }

.eg table.t-data-grid th    { width: 130px; }
.eg table.t-data-grid th a  { text-decoration: none; text-shadow: 0px -1px 0px #4D5F99; }

.eg table.t-data-grid thead tr  { 
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DA9FF', endColorstr='#738FE6'); /* for IE */
                    background: -webkit-gradient(linear, left top, left bottom, from(#8DA9FF), to(#738FE6)); /* for webkit browsers */
                    background: -moz-linear-gradient(top, #8DA9FF, #738FE6); /* for firefox 3.6+ */ }