[Trinidad] Selecting a row in tr:table with mouse click (rowSelection="singleClick")

[Martin Koci]

Hello,

currently tr:table supports selection of one row with attribute
rowSelection="simple". 

For better user experience we want to select a row with clicking on
table row. 

To achieve this I did four minor changes in trinidad code base:

1) support "singleClick" in decoding phase
2) render a hidden field for storing index of clicked row
3) render a onclick for each TR in HTML output
4) add a JS function to Core.js


ad 1) in TableRenderer.decodeSelection(FacesContext, UIComponent):

// added singleClick condition, TableSelectOneRenderer will be used
// for decoding
if ("single".equals(selection) || "singleClick".equals(selection))
_selectOne.decode(context, treeTable);



ad 2) TableRenderer.encodeAll(FacesContext, RenderingContext,
UIComponent, FacesBean):

// If rowSelection is singleClick we render a hidden field
// for storing TR rowIndex
 if
("singleClick".equals(component.getAttributes().get(CoreTable.ROW_SELECTION_KEY.getName())))
      {
      // Id is the same as rowSelection="single" uses     
      String id = tContext.getTableId() + ":selected";
      rw.startElement("input", null);
      rw.writeAttribute("type", "hidden", null);
      rw.writeAttribute("id", id, null);
      rw.writeAttribute("name", id, null);
      rw.endElement("input");
}


ad 3) DesktopTableRenderer._renderTableRows(FacesContext,
RenderingContext, TableRenderingContext, UIComponent)

// for rowSelection="singleClick" render a onclick on each TR element
if("singleClick".equals(component.getAttributes().get(CoreTable.ROW_SELECTION_KEY.getName())))
 {
final String hiddenFieldId=  tContext.getTableId() + ":selected";
writer.writeAttribute("onclick", "onListClick(this,'" + hiddenFieldId
+"')", null);
}

ad 4) and finally in Core.js
function onListClick(rowEl, hiddenId) {
   var jumpValue = rowEl.rowIndex;
   var hiddenField =  document.getElementById(hiddenId);

   hiddenField.value = jumpValue;
   return true;
}


TBD:
-- indicating selected row with a nice CSS style
-- support autoSubmit to deliver SelectionEvent immediately


Any ideas, preferences?

Regards,


Martin Kočí