How Do You Implement an Editable Grid Control in Html/JavaScript that Binds to a Collection of Java Objects?

Question

Consider a simple POJO Java Object:

class MyObj {
  String a, b;
  Integer c;
}

My application executes a Struts action and sets a Collection of these on the Http Request:

request.setAttribute("myObjects", getCollectionOfMyObj());

The action then forwards to a JSP page, and this is where my questions centres:

1. What is the simplest way I can bind this collection into a grid, such that is renders a table with three columns (a, b, c) and one row per object in the passed collection. A key characteristic I require, is that I can add a new field to the Java object and it requires no (or minimal) changes to the UI code, i.e. the object is being introspected and displayed so that I don't have D-R-Y violations in the UI?

2. How can I make the grid editable, so that any changes to a row are reflected back into a new (or the existing) Collection of Java objects in the request for use by other Actions (e.g. to persist the changes)?

Many thanks in advance for your help, please let me know if you need further clarification.

Arun

Answer 1

There are tons of different ways you can achieve the above. But since you are already using Struts I would recommend stick to Struts UI Tags . It will make things little bit easy to start with

Answer 2

If you need to display only your data without editing it I recommend using displaytag, its a custom tag that is used to render tabulated data, and its highly customizable.

However, If you want to edit your data, I advise you to move to some javascript solutions, dhtmlxgrid is one good option, there are many many other solutions in javascript that you could use, however here you will be working with XML data and AJAX, this would be easier to you, and it will make your table more dynamic to changes. After mastering your chosen javascript-solution that best fits you, you could wrap it into a custom tag and generalize it ;-).