Using DisplayTag library, I want to have the currently selected row have a unique custom class using the TableDecorator.

Question

I have been trying to figure out how to highlight the selected row in a table. In my jsp I have jsp scriplet that can get access to the id of the row the displaytag library is creating. I want to compare it to the the id of the current row selected by the user ${currentNoteId}. Right now if the row id = 849 (hardcoded) the class "currentClass" is added to just that row of the table. I need to change the 849 for the {$currentNoteId} and I don't know how to do it. I am using java, Spring MVC. The jsp: ...

<%
request.setAttribute("dyndecorator", new org.displaytag.decorator.TableDecorator()  
{  
   public String addRowClass()  
   {  
      edu.ilstu.ais.advisorApps.business.Note row =               
      (edu.ilstu.ais.advisorApps.business.Note)getCurrentRowObject();      
            String rowId = row.getId();
            if ( rowId.equals("849") ) {
                return "currentClass";
            }
            return null;              
        }
    });
%> 

<c:set var="currentNoteId" value="${studentNotes.currentNote.id}"/>
...
<display:table id="noteTable" name="${ studentNotes.studentList }" pagesize="20"
  requestURI="notesView.form.html" decorator="dyndecorator">
    <display:column title="Select" class="yui-button-match" href="/notesView.form.html"
      paramId="note.id" paramProperty="id">
      <input type="button" class="yui-button-match2" name="select" value="Select"/>
    </display:column>
    <display:column property="userName" title="Created By" sortable="true"/>
    <display:column property="createDate" title="Created On" sortable="true" 
       format="{0,date,MM/dd/yy hh:mm:ss a}"/>
    <display:column property="detail" title="Detail" sortable="true"/>
</display:table>
...

This could also get done using javascript and that might be best, but the documentation suggested this so I thought I would try it. I cannot find an example anywhere using the addRowClass() unless the comparison is to a field already in the row (a dollar amount is used in the documentation example) or hardcoded in like the "849" id.

Thanks for any help you can provide.

Answer 1

I went ahead and did it in javascript instead. When I used the currentNoteId in the scriptlet like this:

String rowId = row.getId();
String noteId = (String) pageContext.getAttribute("currentNoteId");
if ( rowId.equals( noteId ) ) {
    return "currentClass";
}
return null;

I received the error: got error Cannot refer to a non-final variable pageContext inside an inner class defined in a different method.

So instead I wrote:

function highlightCurrentTableRow(tableId, currentRowId ) {
    var table = document.getElementById(tableId);
    var rows = table.getElementsByTagName("tr");
    console.log( "rowId", "'" + currentRowId + "'" );
    for (i = 1; i < rows.length; i++) {
        rowId = rows[i].getElementsByTagName("td")[0].innerHTML;
        console.log( "  rowId", "'" + rowId + "'" );
        if ( rowId == currentRowId ) {
            console.log( "got here" );
            var rowClass = rows[i].getAttribute("class");
            rows[i].setAttribute("class", rowClass + " currentClass"   );  
        };
    }
}

Actually this may not work in IE because of "class" is a key word so I used Yahoo YUI addClass(element, class) instead so I replaced

var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass"   ); 

with

YAHOO.util.Dom.addClass(rows[i],'currentClass');