Grid With Delete Column (1)

A table built with the Grid component, including only the Person columns we want, and adding a Delete column.

To demonstrate a server-side error, try to delete a person whose First Name is Mary.
IdFirst NameLast NameStart DateDelete
3 11444 km Feb 28, 2007
1 Acme2e 456 Jun 19, 1952
5 ksdsad De scoop Jul 7, 2007
2 Mary dgzfgdf Jun 10, 2024
4 yuno 3clover Feb 12, 2008
This example works very much like the Editable Grid For Update example.

References: Grid, ValueEncoder, Forms and Validation.


The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<!-- 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="" xmlns:p="tapestry:parameter">
<body class="container">
    <h3>Grid With Delete Column (1)</h3>
    A table built with the Grid component, including only the Person columns we want, and adding a Delete column.<br/><br/>
    To demonstrate a server-side error, try to delete a person whose First Name is <em>${GOOD_NAME}</em>.<br/>

    <div class="eg">
        <t:form t:id="deletables">
            <t:errors globalOnly="true"/>
            <t:grid source="persons" row="person" encoder="personEncoder" include="id,firstname,lastname,startdate" add="delete">
                    <t:checkbox t:id="delete" value="delete" />

                    <!-- We shadow each output-only with a hidden field to enable redisplay of the list exactly as it was submitted. -->
                    <t:hidden value="person.firstName" />
                    <t:hidden value="person.lastName" />
                    <t:hidden value="person.startDate" t:encoder="dateEncoder" />

                    <!-- If optimistic locking is not needed then comment out this next line. -->
                    <t:hidden value="person.version" />
            <t:eventlink event="refresh" class="btn btn-default">Refresh</t:eventlink>

    This example works very much like the Editable Grid For Update example.<br/><br/>

    <a href="">Grid</a>, 
    <a href="">ValueEncoder</a>, 
    <a href="">Forms and Validation</a>.<br/><br/>
    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.<br/><br/>

        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/GridWithDeleteColumn1.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/plain.css"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/commons/"/>
        <t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/"/>

package jumpstart.web.pages.examples.tables;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.ejb.EJB;

import jumpstart.util.ExceptionUtil;
import jumpstart.web.commons.FieldCopy;

import org.apache.tapestry5.Field;
import org.apache.tapestry5.ValueEncoder;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Checkbox;
import org.apache.tapestry5.corelib.components.Form;

@Import(stylesheet = "css/examples/plain.css")
public class GridWithDeleteColumn1 {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    private List<Person> persons;

    private Person person;

    private final PersonEncoder personEncoder = new PersonEncoder();

    private final DateEncoder dateEncoder = new DateEncoder();

    private final String GOOD_NAME = "Mary";

    // Work fields

    private List<Person> personsInDB;

    private boolean inFormSubmission;

    private List<Person> personsSubmitted;

    private List<IdVersion> personsToDelete;

    private int rowNum;
    private Map<Integer, FieldCopy> deleteFieldCopyByRowNum;

    // Other pages

    private GridWithDeleteColumn2 page2;

    // Generally useful bits and pieces

    private Form form;

    private Checkbox deleteField;

    private IPersonFinderServiceLocal personFinderService;

    // The code

    void onActivate() {
        inFormSubmission = false;

    // Form bubbles up the PREPARE_FOR_RENDER event during form render.

    void onPrepareForRender() {

        // If fresh start, populate screen with all persons from the database

        if (form.isValid()) {
            // Get all persons - ask business service to find them (from the database)
            personsInDB = personFinderService.findPersons(MAX_RESULTS);

            persons = new ArrayList<Person>();
            for (Person personInDB : personsInDB) {


    // Form bubbles up the PREPARE_FOR_SUBMIT event during form submission.

    void onPrepareForSubmit() {
        inFormSubmission = true;
        personsSubmitted = new ArrayList<Person>();
        personsToDelete = new ArrayList<IdVersion>();

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

        // Prepare to take a copy of each editable field.

        rowNum = -1;
        deleteFieldCopyByRowNum = new HashMap<Integer, FieldCopy>();

    void onValidateFromDelete() {
        // Unfortunately, this method is never called because Checkbox doesn't bubble up VALIDATE. It's a shame because
        // this would be the perfect place to validate whether deleting is OK, or to put an entry in
        // deleteFieldCopyByRowNum.
        // Please vote for .

    void onValidateFromDeletables() {

        // Error if any person to delete has a null id - it means toValue(...) found they are no longer in the database.

        for (IdVersion personToDelete : personsToDelete) {
            if (personToDelete.getId() == null) {
                form.recordError("The list of persons is out of date. Please refresh and try again.");

        // Populate our list of persons to delete with the submitted versions (see setDelete(...) for more).
        // Also, simulate a server-side validation error: return error if deleting a person with first name BAD_NAME.

        for (IdVersion personToDelete : personsToDelete) {
            rowNum = -1;

            for (Person personSubmitted : personsSubmitted) {

                if (personSubmitted.getId() != null && personSubmitted.getId().equals(personToDelete.getId())) {

                    // Unfortunately, at this point the deleteField is from the final row of the Loop.
                    // Fortunately, we have a copy of the correct field, so we can record the error with that.

                    if (personSubmitted.getId() == 2 && personSubmitted.getFirstName() != null
                            && personSubmitted.getFirstName().equals(GOOD_NAME)) {
                        Field field = deleteFieldCopyByRowNum.get(rowNum);
                        form.recordError(field, "Cannot delete " + GOOD_NAME + ".");


        if (form.getHasErrors()) {
            // We get here only if a server-side validator detected an error.

        try {
            System.out.println(">>> personsSubmitted = " + personsSubmitted);
            System.out.println(">>> personsToDelete = " + personsToDelete);
            // In a real application we would persist them to the database instead of printing them
            // personManagerService.bulkEditPersons(new ArrayList<Person>(), new ArrayList<Person>(), personsToDelete);
        catch (Exception e) {
            // Display the cause. In a real system we would try harder to get a user-friendly message.

    Object onSuccess() {
        return page2;

    void onFailure() {
        persons = new ArrayList<Person>(personsSubmitted);

    void onRefresh() {
        // By doing nothing the page will be displayed afresh.

    public Person getPerson() {
        return person;

    public void setPerson(Person person) {
        this.person = person;

        if (inFormSubmission) {

    // This encoder is used by our Loop:
    // - during render, to convert each person to an id (Loop then stores the ids in the form, hidden).
    // - during form submission, to convert each id back to a person which it puts in our person field.

    private class PersonEncoder implements ValueEncoder<Person> {

        public String toClient(Person value) {
            Long id = person.getId();
            return id == null ? null : id.toString();

        public Person toValue(String idAsString) {
            Long id = idAsString == null ? null : new Long(idAsString);
            Person person = findPerson(id);

            // If person has since been deleted from the DB. Create a skeleton person.
            if (person == null) {
                person = new Person();

            // Loop will overwrite the firstName of the person returned.
            return person;

        private Person findPerson(Long id) {

            // We could find the person in the database, but it's cheaper to search the list we got in
            // onPrepareForSubmit().

            for (Person person : personsInDB) {
                if (person.getId().equals(id)) {
                    return person;
            return null;

    // The Grid component will automatically call this for every row as it is rendered.

    public boolean isDelete() {
        return false;

    // The Grid component will automatically call this for every row on submit.

    public void setDelete(boolean delete) {

        if (inFormSubmission) {
            deleteFieldCopyByRowNum.put(rowNum, new FieldCopy(this.deleteField));

            if (delete) {
                // Put the current person in our list of ones to delete. Record their id but not version - we shouldn't
                // assume person.version has been overwritten yet with the submitted value - it may still hold the
                // database value.
                personsToDelete.add(new IdVersion(person.getId(), null));


    private class DateEncoder implements ValueEncoder<Date> {

        public String toClient(Date date) {
            long timeMillis = date.getTime();
            return Long.toString(timeMillis);

        public Date toValue(String timeMillisAsString) {
            long timeMillis = Long.parseLong(timeMillisAsString);
            Date date = new Date(timeMillis);
            return date;



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

// Based on a solution by Stephan Windmüller in 
// and Shing Hing Man in .

package jumpstart.web.commons;

import org.apache.tapestry5.Field;

 * An immutable copy of a Field. Handy for taking a copy of a Field in a row as a Loop iterates through them.
public class FieldCopy implements Field {
    private String clientId;
    private String controlName;
    private String label;
    private boolean disabled;
    private boolean required;

    public FieldCopy(Field field) {
        clientId = field.getClientId();
        controlName = field.getControlName();
        label = field.getLabel();
        disabled = field.isDisabled();
        required = field.isRequired();

    public String getClientId() {
        return clientId;

    public String getControlName() {
        return controlName;

    public String getLabel() {
        return label;

    public boolean isDisabled() {
        return disabled;

    public boolean isRequired() {
        return required;



import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.EnumType;
import javax.persistence.Enumerated;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.PrePersist;
import javax.persistence.PreUpdate;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.persistence.Version;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

 * The Person entity.
public class Person implements Serializable {

    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(nullable = false)
    private Long id;

    @Column(nullable = false)
    private Integer version;

    @Column(length = 10, nullable = false)
    @Size(max = 10)
    private String firstName;

    @Column(length = 10, nullable = false)
    @Size(max = 10)
    private String lastName;
    private Regions region;

    private Date startDate;

    public String toString() {
        final String DIVIDER = ", ";
        StringBuilder buf = new StringBuilder();
        buf.append(this.getClass().getSimpleName() + ": ");
        buf.append("id=" + id + DIVIDER);
        buf.append("version=" + version + DIVIDER);
        buf.append("firstName=" + firstName + DIVIDER);
        buf.append("lastName=" + lastName + DIVIDER);
        buf.append("region=" + region + DIVIDER);
        buf.append("startDate=" + startDate);
        return buf.toString();

    // Default constructor is required by JPA.
    public Person() {

    public Person(String firstName, String lastName, Regions region, Date startDate) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.region = region;
        this.startDate = startDate;

    // The need for an equals() method is discussed at
    public boolean equals(Object obj) {
        return (obj == this) || (obj instanceof Person) && id != null && id.equals(((Person) obj).getId());

    // The need for a hashCode() method is discussed at

    public int hashCode() {
        return id == null ? super.hashCode() : id.hashCode();

    public void validate() throws ValidationException {


    public Long getId() {
        return id;

    public Integer getVersion() {
        return version;

    public void setVersion(Integer version) {
        this.version = version;

    public String getFirstName() {
        return firstName;

    public void setFirstName(String firstName) {
        this.firstName = firstName;

    public String getLastName() {
        return lastName;

    public void setLastName(String lastName) {
        this.lastName = lastName;

    public Regions getRegion() {
        return region;

    public void setRegion(Regions region) {
        this.region = region;

    public Date getStartDate() {
        return startDate;

    public void setStartDate(Date startDate) {
        this.startDate = startDate;