Avoid onRowClick event in certain column of rich:dataTable

Question

I have a rich:dataTable which contains 4 columns.

The first one is a selectBooleanCheckBox, which fires an event called "CheckEvent" (just for the example) into the bean.

Meanwhile, the dataTable also supports the onRowClick event, which fires "onRowClick" on the bean.

The problem I'm facing is that when I click on the first column (the check one), the onRowClick also fires. This certainly is a problem in this situation: if a row has the check selected and I just want to deselect it, the onRowClick highlights the row, a behaviour I don't want.

I've tried to define the oOnRowClick event inside the other three rich:columns, but what I achieve this way is nothing; that the event doesn't even trigger, so there's no onRowClick for the datatable.

Trying to make the logic via the bean doesn't work either, since I don't know which column is pushed when I enter the onRowClick() method.

I'm really desperate about this. Any help would be kindly appreciated.

Answer 1

onrowclick adds onclick on the table row, if you don't want it to fire you have to prevent the click event on the checkbox from bubbling up to the row, e.g.:

<h:selectBooleanCheckbox onclick="event.stopPropagation()" … />

Answer 2

I can see that this <h:selectBooleanCheckbox onclick="event.stopPropagation()" … /> works perfectly for solving the QA's Problem with the selectBooleanCheckbox.

Would something similar work, if the Column that is not supposed to react to the onclick Event contains a clickable Icon, that is supposed to execute a different function? See the example below:

<rich:panel headerClass="panelHeader" styleClass="panel">
    <f:facet name="header">Header</f:facet>
    <rich:dataTable id="myTable" value="#{myModel}" var="k">

        <a4j:support event="onRowClick" action="#{myAction.selectItem(k, facesContext.viewRoot.viewId)}"
                            reRender="myTable"/>

            <rich:column>
                <f:facet name="header">
                        <h:outputText value="Normal Column - should be clickable"/>
                </f:facet>
                <h:outputText value="#{k.name}"/>
            </rich:column>

            <rich:column >
                <f:facet name="header">
                    <h:outputText value="Only Click on Icon should react to Mouseclick"/>
                </f:facet>
                <s:graphicImage value="/img/bin_closed.gif">
                    <a4j:support event="onclick"
                                 action="#{myAction.deleteItem(k)}"
                                 reRender="myTable"
                                 ajaxSingle="true" limitToList="true"
                                 onsubmit="if(!confirm('Really?')) { return false; }" />/>
                </s:graphicImage>
            </rich:column>

    </rich:dataTable>

</rich:panel>