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.

You placed back [javascript] tag. I disagree this. [javascript] users are not capable of answering this question as they have no knowledge of [jsf]. They are not able to tell how exactly the RichFaces-specific `onRowClick` event is represented in HTML/JS context. The [jsf] and particularly [richfaces] users, on the other hand, do have knowledge of [javascript] and, more importantingly, RichFaces-generated HTML/JS output. If you were able to boil down and demonstrate the problem into some jsfiddle demo, then of course [javascript] is applicable, but [jsf]/[richfaces] is in turn questionable ;) — BalusC, Apr 08 '16 at 13:40

score 6 · Accepted Answer · answered Apr 08 '16 at 13:52

6

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()" … />

answered Apr 08 '16 at 13:52

Makhiel

3,874
1
15
21

Thanks, that was it ; ) – aran Apr 13 '16 at 11:14

score 1 · Answer 2 · answered Apr 24 '18 at 14:38

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>

Avoid onRowClick event in certain column of rich:dataTable

2 Answers2