title: Creating a drop-down row in displaytag
body: <p>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.  </p>
  
  <p>For example, before clicking Details link on Row 1:</p>
  
  <p>row1|col1|col2|col3|col4|Detail<br>
  row2|col1|col2|col3|col4|Detail<br>
  row3|col1|col2|col3|col4|Detail  </p>
  
  <p>After click:</p>
  
  <p>row1|col1|col2|col3|col4|Detail<br>
  --------row1Detail---------------<br>
  row2|col1|col2|col3|col4|Detail<br>
  row3|col1|col2|col3|col4|Detail  </p>
  
  <p>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.</p>
  
  <p>e.g.:</p>
  
  <pre><code>public class CustomDecorator extends TableDecorator {
     public String getDetailsRow() {
        MyObject object = (MyObject)this.getCurrentRowObject();
        return "&lt;a onClick=\"myjsfunction(object.getId()); return true\"&gt;Details&lt;/a&gt;";
     }
  }
  </code></pre>
  
  <p>...and in the JSP I would have a detailsRow property nested between the display:table tags:</p>
  
  <pre><code>&lt;display:column property="detailsRow" sortable="false" /&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>This is my first question on stackoverflow, btw - so please let me know whether you need more detail.</p>