Clicking button on row of datatable

[lukep1984]

<rich:contextMenu hideDelay="100" attached="false" id="contextMenu">
<rich:menuItem value="Item1" action="{cardBean.viewCard}">
 <a4j:actionparam assignTo="#{bean.param1}" value="{value1}"/>
</rich:menuItem>
</rich:contextMenu>


<rich:panel id="panel1">
 <f:facet name="header">
 <h:outputText value="Header"/>
 </f:facet>

<rich:dataTable id="list" value="#{bean.list}" var="var" onRowMouseOver="this.style.backgroundColor='#ECF4FE'" onRowMouseOut="this.style.backgroundColor=''" styleClass="dataTable" rowClasses="firstRow, secondRow">
 <a4j:support event="onRowClick" action="#{bean.mainView}" ignoreDupResponses="true"/>

 <f:facet name="header">
 <rich:columnGroup>
...
...
...
 </rich:columnGroup>
 </f:facet>

 <rich:column>
 <h:outputText value="first />
 </rich:column>
 <rich:column>
 <h:outputText value="second"/>
 </rich:column>
...
...
...
 <rich:column styleClass="col20">
 <div>
<a4j:commandLink id="clickViewsSubmit" action="#{bean.actionCol}" type="button">
 <rich:componentControl for="contextMenu" operation="show">
 <f:param value="#{var.first}" name="value"/>
 </rich:componentControl>
 <h:graphicImage url="../images/search_trans.gif"/>
</a4j:commandLink>
 </div>
 </rich:column>
</rich:dataTable>

I have table like this above. In the last column of dataTable I want to have button/link to show context menu by clicking on this image. But beacuse this button/link is part of row in datatable so when I'm clicking this button I'm also clicking row and action onRowClick is calling needlessly. I would like to avoid this situation. Is is possible?Any ideas?

Thanks for all responses.

[nbelaevski]

Hello,

Add this:

<div onclick="Event.stop(event)">

to prevent event propagation.

[lukep1984]

Thanks for try, but it didn't help.Action OnRowClick is still taking place.

[ilya_shaikovsky]

and what if you add the onclick="Event.stop(event)" to command link?

[lukep1984]

Thanks for help, but it doesn't prevent from action onRowClick either.

[ilya_shaikovsky]

just checked within RF demo env

 <rich:dataTable value="#{dataTableScrollerBean.allCars}" columns="1"
 var="category" rows="20" rowKeyVar="row"
 ajaxKeys="#{dataTableScrollerBean.keys}" id="table">
 <a4j:support event="onRowClick"/>
 <f:facet name="header">
 <h:outputText value="Cars Store"/>
 </f:facet>
 <rich:column width="100em;">
 <f:facet name="header">
 <h:outputText value="Make" />
 </f:facet>
 <h:outputText value="#{category.make}" id="make" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Model" />
 </f:facet>
 <h:outputText value="#{category.model}" id="model" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Price" />
 </f:facet>
 <h:outputText value="#{category.price}" id="price" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Mileage" />
 </f:facet>
 <h:outputText value="#{category.mileage}" />
 </rich:column>
 <rich:column width="200px">
 <f:facet name="header">
 <h:outputText value="VIN" />
 </f:facet>
 <h:outputText value="#{category.vin}" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Stock" />
 </f:facet>
 <a4j:commandLink value="1123123" onclick="Event.stop(event);"/>
 <h:outputText value="#{category.stock}" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 Actions
 </f:facet>
 <a4j:commandLink ajaxSingle="true" id="editlink"
 oncomplete="#{rich:component('editPanel')}.show()">
 <h:graphicImage value="/images/icons/edit.gif" style="border:0"/>
 <f:setPropertyActionListener value="#{category}"
 target="#{dataTableScrollerBean.currentItem}" />
 <f:setPropertyActionListener value="#{row}"
 target="#{dataTableScrollerBean.currentRow}" />
 </a4j:commandLink>
 <rich:toolTip for="editlink" value="Edit"/>
 <a4j:commandLink ajaxSingle="true" id="deletelink"
 oncomplete="#{rich:component('deletePanel')}.show()">
 <h:graphicImage value="/images/icons/delete.gif" style="border:0"/>
 <f:setPropertyActionListener value="#{row}"
 target="#{dataTableScrollerBean.currentRow}" />
 </a4j:commandLink>
 <rich:toolTip for="deletelink" value="Delete"/>
 </rich:column>
 <f:facet name="footer">
 <rich:datascroller renderIfSinglePage="false" maxPages="5"/>
 </f:facet>
 </rich:dataTable>
 </a4j:region>
 </h:form>



only one request fired in my case when clicking a link.

[ilya_shaikovsky]

I've meant

<a4j:commandLink value="1123123" onclick="Event.stop(event);"/>

link


And the other links causes two request because not stopping the event.

[argonist]

Checkbox with Event.stop(event) in a column isn't working.

<h:selectBooleanCheckbox onclick="Event.stop(event)" value="#{req.firstInterpreterTimeChecked}" />

Have you another idea?

[nbelaevski]

Hi.

What exactly isn't working? Are there any JavaScript errors in browser log?

[argonist]

Hi,

I cannot change the checkbox because all events are stop, if I am clicking on checkbox. But the stop of the event "onRowClick" is working.

In Ajax-log are there no error.

[nbelaevski]

In what browser?

[argonist]

hi,

I found out at javascript-debbuger, that there is a problem.

function for onclick

 function onclick(event) {
 this.checked;
 Event.stop(event);
}

If I make with javascript-debbuger a step by step through that code, then I can see that the value of this.checked change. The value of this.checked don't save after the finishing of the function onclick(even). Is that a Bug?

[argonist]

Hi nbelaevski,

sorry, I read your rely now. I was waiting for your rely yesterday, but your rely is in second page. fuck...

browser: firefox 3.0.10

Manu

[argonist]

Hi,

I have still that problem and think, that is bug.

Manu

[sefai]

Based on this post, if I use

<rich:column onclick="event.stopPropagation()" />

checkbox works as expected. Is it safe to use like this, will it have any side effects?

Best regards...