panelGrid/dataTable problem

[seb petterson]

I have a panelGrid in my jsp, and now I want to be able to bind a tablerow to a javascript via a mouseover event (to change color when mouse hovers).

The html for this is simple:

  tr onmo useover="changeMyColor(this)") ...

But JSF seems to be at a loss here. For the entire table it's easy cos panelGrid has attribute for all mouseevents, but I can't specify javascript binding at row level.

Any input appreciated.

/seb

[ August 21, 2005: Message edited by: seb petterson ]
[ August 22, 2005: Message edited by: seb petterson ]

[Rick Beaver]

Make each row contain a component which has attached a mouse over event

For example:

<x :mrgreen: ataTable id="stuff" var="thing"...>
    <h:column id="myCol">
        <x:commandLink action="gothere" value="Click me" onm0useover="yourFunctionHere">
    </h:column>
</x :mrgreen: ataTable>

[seb petterson]

Originally posted by Rick Beaver:
Make each row contain a component which has attached a mouse over event

For example:

<x  :mrgreen:  ataTable id="stuff" var="thing"...>
    <h:column id="myCol">
        <x:commandLink action="gothere" value="Click me" onm0useover="yourFunctionHere">
    </h:column>
</x  :mrgreen:  ataTable>

The example you provide will not result in what I was asking for. Adding a component to column like you do will (as the name "column" suggests) add a component to a column in the current row, not to the entire row. Hence it will bind a mouseover event to that TD not to the TR.

[Rick Beaver]

Correct - so you do it for every column in the row if you want everything to have a mouseover effect.

You have to do that in plain HTML as well so it is nothing new.

as the name "column" suggests

I object to being patronised when I offer free advice to someone who asks for it so I think I will leave it here. Good luck.

[seb petterson]

Originally posted by Rick Beaver:
[QB]Correct - so you do it for every column in the row if you want everything to have a mouseover effect.

You have to do that in plain HTML as well so it is nothing new.
[QB]

Actually thats incorrect, in plain html you can define dhtml bindings for onmouseover for an entire row, you do not have to do it for each cell in a row. Furthermore, the effect is completely different in declaring onmouseover events for individual cells since I am not looking for a way to change cell while the other cells on the same row remain unchanged.

(My apologies, I was grumpy this morning, I am thankful for all input.)

[Rick Beaver]

Originally posted by seb petterson:


Actually thats incorrect, in plain html you can define dhtml bindings for onmouseover for an entire row.

Then I stand corrected - I apologise.

In that case I don't think you can do that with standard JSF.

[Mike Minner]

Will this work for you?

 <h:form>
<h:panelGrid columns="1" bgcolor="#000000;">
<h:panelGrid columns="3" bgcolor="#000000;" onmouse over="changeColor(this);">
<h:outputText value="1" style="color: #ffffff;" />
<h:outputText value="2" style="color: #ffffff;" />
<h:outputText value="3" style="color: #ffffff;" />
</h:panelGrid>
<h:panelGrid columns="3" bgcolor="#000000;" onmouse over="changeColor(this);">
<h:outputText value="4" style="color: #ffffff;" />
<h:outputText value="5" style="color: #ffffff;" />
<h:outputText value="6" style="color: #ffffff;" />
</h:panelGrid>
<h:panelGrid columns="3" bgcolor="#000000;" onmouse over="changeColor(this);">
<h:outputText value="7" style="color: #ffffff;" />
<h:outputText value="8" style="color: #ffffff;" />
<h:outputText value="9" style="color: #ffffff;" />
</h:panelGrid>
</h:panelGrid>
</h:form> 

Edit: had to put a space in 'onmouseover' call because the BB would not let me post it otherwise.

[ August 23, 2005: Message edited by: Mike Minner ]

Smilies are the spawn of Satan!!! Aaarrggghhhh!!!
[ August 23, 2005: Message edited by: Mike Minner ]

[seb petterson]

Originally posted by Mike Minner:
Will this work for you?

Yes sir, most def.

Another question, do you know how to make it work for dataTable (I have a situation where I need to generate a table dynamically where dataTable serves me better).

Thanks!

[Mike Minner]

Will this work for you?

Javascript:

function changeColor(elem) {
    var cell = elem.parentNode;
    var row = cell.parentNode;
    var cells = row.childNodes;
    for(var i = 0; i < cells.length; i++) {
var c = cells[i];
c.style.backgroundColor = "#000000";
    }
}

JSP

<h:form id="form">
<h:dataTable id="table" value="#{testBean.nameList}" var="name" cellspacing="0" width="500">
<h:column>
<f:facet name="header">
<h:outputText value="First" />
</f:facet>
<h:inputText value="#{name.first}" onmouse over="changeColor(this);" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last" />
</f:facet>
<h:inputText value="#{name.last}" onmouse over="changeColor(this);" />
</h:column>
</h:dataTable>
</h:form>

Note: I had to put a space in "onmouseover" to be able to post this.

[seb petterson]

Originally posted by Mike Minner:
Will this work for you?

Thanks, its close but I dont think it will. I need to have h utputText as components in the table rather than h:inputText, and ouputText doesnt take onmouseover as attribute.

...hmm, actually thats prolly close enough, i should be able to wrap the outputText in a panelGrid or something that takes onmouseover, then combine that with a version of your javascript. right? ...anyway, i need to get off the computer now, i ll try it tomorrow.

Thanks a lot for your help!
[ August 23, 2005: Message edited by: seb petterson ]

[Mike Minner]

Yes, you are right. Just wrap it in a panelGrid. I wanted to keep the code simple.

You shouldn't have to adjust the javascript, because the <td> will still be the parentNode of the element passes as "this" in the method call.

cheers

[Gregg Bolinger]

This problem is just screaming custom component.

[Mike Minner]

Now, don't go setting me on another adventure that I don't have time to go on but probably will any way because I am incapable of letting it go.