Creating a drop-down row in displaytag

Question

I am currently using displaytag for tabular data, but would like to create a "kayak.com-like" interface where when a user clicks a row, the user is shown more details about the particular row without a page refresh.

For example, before clicking Details link on Row 1:

row1|col1|col2|col3|col4|Detail
row2|col1|col2|col3|col4|Detail
row3|col1|col2|col3|col4|Detail

After click:

row1|col1|col2|col3|col4|Detail
--------row1Detail---------------
row2|col1|col2|col3|col4|Detail
row3|col1|col2|col3|col4|Detail

I tried using a decorator to return javascript that would do this. The javascript is executed, but it is only reflected in the column where it was rendered. I am looking to insert a new row with the data that does not affect displaytag's pagination and sorting.

e.g.:

public class CustomDecorator extends TableDecorator {
   public String getDetailsRow() {
      MyObject object = (MyObject)this.getCurrentRowObject();
      return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
   }
}

...and in the JSP I would have a detailsRow property nested between the display:table tags:

<display:column property="detailsRow" sortable="false" />

Any tips on how to insert a new row properly? The solution may be in the way that the javascript is written - I'm not an expert with Javascript, so any tips would be appreciated. Is there a better way to do this with displaytag? I don't know of any explicit integration that displaytag has with javascript (like an "onclick" parameter) either.

This is my first question on stackoverflow, btw - so please let me know whether you need more detail.

Answer 1

Sorry to drag up an old question but here's a possible solution incase anyone runs into this. When overriding TableDecorator, override the finishRow method to return your details row. This method will run after each row is written in the table, so for each real row, you'll have a hidden row with the details in it

public String finishRow() {
   return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>";
}

Then you just have some javascript on the details column to set the hidden row to visible.

Edit: Additional details:

Add a new javascript function

function displayDetails(id) {
   document.getElementById(id + 'details').style.visibility = 'visible'
}

Then your normal row would look something like:

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr>

Answer 2

I'm not sure if this will help, but I am a big fan of DataTables.net. It's based in jQuery, but it is extremely powerful.

They have an example that sounds an awful lot like what you want: Row Details