myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Martin Koci <Martin.K...@aura.cz>
Subject [Trinidad] Selecting a row in tr:table with mouse click (rowSelection="singleClick")
Date Fri, 31 Aug 2007 19:16:33 GMT
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čí









Mime
View raw message