-
1. Re: show details when clicking on a table row?
sergeysmirnov Apr 12, 2007 6:52 PM (in response to baz)I cannot say that the direction is completely wrong (or wrong completely). rich:dataTable has not selection model out-of-the-box. So, it is your job to provide it in your particular application. The strategy how to accomplish it might be vary. You can write a javascript that scan DOM tree and reset the selection, you can assign the javascript object and store the information about selection there, you can store state in the hidden field for further use or not. What strategy to select is up to you.
Getting the object from the current row with Ajax command component is the same as for non-ajax ones. If your data extends DataModel, the information about current row presents in the event. -
2. Re: show details when clicking on a table row?
zenshai Apr 18, 2007 11:41 AM (in response to baz)Hi,
I am working on a similar problem. I have managed to find here on the forums how to send information about a selected row to the server. Now all i need is to color that row so that the user knows its selected. The live-demo uses something like
onRowClick="this.style.backgroundColor='#cc0106'"
however when I try to implement logic like check what the color of the row is before i change it i find that the this.style object is null. Perhaps im approaching this the wrong way.
Maybe you can clarify your reply above a little:
When you say:"SergeySmirnov" wrote:
You can write a javascript that scan DOM tree and reset the selection, you can assign the javascript object and store the information about selection there, you can store state in the hidden field for further use or not.
What would I be scanning the DOM for?
What do you mean by "assign the javascript object"?
Is there a javascript object for each row? and if there is does it have an index property I can use to remember which row is selected? -
3. Re: show details when clicking on a table row?
tbrown_01923 Apr 18, 2007 12:07 PM (in response to baz)var styleHolder ;
var clickedRow ;
function onOver(elmt) {
styleHolder = elmt.className;
elmt.className = 'Over'
}
function onOut(elmt) {
if(elmt.className != 'Selected') {
elmt.className = styleHolder;
}
}
function onClick(elmt) {
for(var n = 0; n < elmt.parentElement.children.length; n++) {
elmt.parentElement.children[n].className = (n % 2 == 0) ? 'Odd' : 'Even' ;
}
elmt.className = 'Selected'
// implment your code to store value such as
var val = findDescendantByName(elmt, 'selectValue') ;
clickedRow = val.value ;
}
<rf:dataTable ...
onRowMouseOver="onOver(this)"
onRowMouseOut="onOut(this)"
onRowClick="onClick(this)"
/> -
4. Re: show details when clicking on a table row?
tbrown_01923 Apr 18, 2007 12:10 PM (in response to baz)oops... too anxious on submit. I used classes to apply styles for mouseover and selected rows. Any time you are over a row remember what the style was before...
The only gotcha is my default row styles vary between odd and even. Before and row is selected (onclick) I need to deselect previous rows... so I need to reset the classes thus the for loop in the onClick Handler. -
5. Re: show details when clicking on a table row?
zenshai Apr 18, 2007 1:02 PM (in response to baz)Many thanks, you saved me a whole lot of of time.
-
6. Re: show details when clicking on a table row?
zenshai Apr 18, 2007 2:22 PM (in response to baz)only thing is im getting an error in onClick:
elmt.parentElement has no properties
trying to figure it out myself, but if anyone can help it would be greatly appreciated. -
7. Re: show details when clicking on a table row?
zenshai Apr 18, 2007 4:15 PM (in response to baz)found the problem, its "parentNode.childNodes", your version only works in IE .
Thanks again. -
8. Re: show details when clicking on a table row?
baz Apr 19, 2007 1:33 AM (in response to baz)@Zenshai
I have managed to find here on the forums how to send information about a selected row to the server.
Would you be so kind to send me a pointer to the information, or even better share your solution with us?
Ciao,
Carsten -
9. Re: show details when clicking on a table row?
zenshai Apr 19, 2007 10:12 AM (in response to baz)Sure, sorry about that, for some reason I thought your question was answered.
This is the method I have in the backing bean:public void rowSelected(ActionEvent event) { Integer currIndex = getTable().getRowIndex(); List allData = (List) getTable().getValue(); this.currRow = (TableRow) allData.get(currIndex); System.out.println("@#@#@#@#@#@#@: ROW: "+currRow.getRequestId()+" "+currRow.getCreator()+" "+currRow.getState()+" "+currRow.getDescription()); }
TableRow is just a POJO i made, with only properties and getters/setters for each column.
And this is what my table looks like:<rich:dataTable onRowMouseOver="onRowOver(this)" onRowMouseOut="onRowOut(this)" onRowClick="onRowClick(this)" cellpadding="0" cellspacing="0" width="700" border="0" value="#{ajaxhelper.requestList}" var="row" binding="#{ajaxhelper.table}" > <a4j:support event="onRowClick" actionListener="#{ajaxhelper.rowSelected}"/> <rich:column> <f:facet name="header"> <h:outputText value="Request ID"/> </f:facet> <h:outputText value="#{row.requestId}"/> ........ </rich:dataTable>
-
10. Re: show details when clicking on a table row?
tbrown_01923 Apr 19, 2007 10:31 AM (in response to baz)My version is only intended to work in IE at this point. The otehr way of resetting the rows is getting the Table node by call document.getElelementById...
To which I use a helper method (assuming many forms, but elements are uniquely ID'd across them...)
function findFormElement(elementId) {
var i = 0 ;
for(i = 0; i < document.forms.length; i++) {
if(document.getElementById(document.forms.id + ':' + elementId)) {
return document.getElementById(document.forms.id + ':' + elementId);
}
}
return null;
}
same IE constraints apply - this code should work across browsers but hasnt been tested. The benefit of working in the financial industry - is EVERYbody uses ie. 6 or 7 :) Beats the days when I was devleloping for 1e 3.0, netscape 4.0.1 and LYNX - YUCH! -
11. Re: show details when clicking on a table row?
baz Apr 20, 2007 3:57 AM (in response to baz)Thanks for the answer.
If you are using Seam it gets even easier:<rich:dataTable onRowMouseOver="onRowOver(this)" onRowMouseOut="onRowOut(this)" onRowClick="onRowClick(this)" cellpadding="0" cellspacing="0" width="700" border="0" value="#{ajaxhelper.requestList}" var="row" <a4j:support event="onRowClick" action="#{ajaxhelper.rowSelected(row)}"/> <rich:column> <f:facet name="header"> <h:outputText value="Request ID"/> </f:facet> <h:outputText value="#{row.requestId}"/> ........ </rich:dataTable>
and ajaxhelper looks like:public void rowSelected(TypeOfElem elem) { System.out.println("@#@#@#@#@#@#@: ROW: "+elem.getRequestId()+" "+elem.getCreator()+" "+elem.getState()+" "+elem.getDescription()); }
TypeOfElem is the Type of an element from requestlist.
Seam can use extended EL Expressions where you can pass parameters to action methods.
Ciao,
Carsten
BTW: Did you know that there is a method getRowData?
You can get the current row object with this.public void rowSelected(ActionEvent event) { Object obj = getTable().getRowData(); //cast obj to appropriate type. System.out.println("@#@#@#@#@#@#@: ROW: "+currRow.getRequestId()+" "+currRow.getCreator()+" "+currRow.getState()+" "+currRow.getDescription()); }
-
12. Re: show details when clicking on a table row?
zenshai Apr 20, 2007 6:27 PM (in response to baz)"tbrown_01923" wrote:
The benefit of working in the financial industry - is EVERYbody uses ie. 6 or 7 :) Beats the days when I was devleloping for 1e 3.0, netscape 4.0.1 and LYNX - YUCH!
Yea, technically im developing for IE6 but since firebug is such a nice tool, I make things work in FF first and worry about IE later.
Also, baz yea I saw that method in the same post i mentioned earlier, I didnt use it because i know i will need that current index later. In fact im going to make index a property in my TableRow class, it will probably help with implementing sorting which is the next thing I need to do. -
13. Re: show details when clicking on a table row?
dxxvi Apr 30, 2007 2:28 PM (in response to baz)Could I ask a question?
I don't use Seam. I'm using jsf 1.2, facelets, ajax4jsf, rich faces. There's this line in your code:<a4j:support event="onRowClick" action="#{ajaxhelper.rowSelected(row)}"/>
Is it possible to call a method with parameters in the action property? I tried this example and there's an exceptioncom.sun.facelets.tag.TagAttributeException: /admin/pieces/role/role-view.xhtml @32,83 action="#{roleView.roleSelected(role)}" Error Parsing: #{roleView.roleSelected(role)} ... com.sun.el.parser.ParseException: Encountered "(" at line 1, column 24. Was expecting one of: "}" ... "." ... "[" ... ">" ... "gt" ... "<" ... "lt" ... ">=" ... "ge" ... "<=" ... "le" ... "==" ... "eq" ... "!=" ... "ne" ... "&&" ... "and" ... "||" ... "or" ... "*" ... "+" ... "-" ... "?" ... "/" ... "div" ... "%" ... "mod" ...
I don't have the onRowClick javascript function in my page (because I didn't see it here)."baz" wrote:
Thanks for the answer.
If you are using Seam it gets even easier:<rich:dataTable onRowMouseOver="onRowOver(this)" onRowMouseOut="onRowOut(this)" onRowClick="onRowClick(this)" cellpadding="0" cellspacing="0" width="700" border="0" value="#{ajaxhelper.requestList}" var="row" <a4j:support event="onRowClick" action="#{ajaxhelper.rowSelected(row)}"/> <rich:column> <f:facet name="header"> <h:outputText value="Request ID"/> </f:facet> <h:outputText value="#{row.requestId}"/> ........ </rich:dataTable>
and ajaxhelper looks like:public void rowSelected(TypeOfElem elem) { System.out.println("@#@#@#@#@#@#@: ROW: "+elem.getRequestId()+" "+elem.getCreator()+" "+elem.getState()+" "+elem.getDescription()); }
TypeOfElem is the Type of an element from requestlist.
Seam can use extended EL Expressions where you can pass parameters to action methods.
Ciao,
Carsten
BTW: Did you know that there is a method getRowData?
You can get the current row object with this.public void rowSelected(ActionEvent event) { Object obj = getTable().getRowData(); //cast obj to appropriate type. System.out.println("@#@#@#@#@#@#@: ROW: "+currRow.getRequestId()+" "+currRow.getCreator()+" "+currRow.getState()+" "+currRow.getDescription()); }
-
14. Re: show details when clicking on a table row?
sergeysmirnov Apr 30, 2007 3:11 PM (in response to baz)Action method is a method that return String and has not parameters.
So, both methods you show are not the action methods. The second one is qualified to be an action listener (and you need to use actionListener attribute in this case)
The standard EL without Seam enhancements does not parameters. As soon as you do not use Seam yet, this option is not available for you.