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čí
