When user click in a row (dataTable), don't select row

Question

I'm making my term papper and I need some help with Primefaces. I'm using JSF 2.0 and Primefaces 4.0.

The default PrimeFace DataTable is awesome, because we can get the object of the selected row, thing that I think we can't do in pure JSF.

But I have one problem, I want that user can't select a row, just click in a row. I mean, when the user click in a row, I get the value of the clicked row and this must have a link.

You understand better when you see my code below:

<p:dataTable id="minhaTabela" var="disciplina" value="#{disciplinaMBean.listaDisciplinasPesquisadas}" rowKey="#{disciplina.id}"                       
selection="#{disciplinaMBean.disciplinaSelecionada}" selectionMode="single">

    <p:column headerText="Nome" styleClass="pull-left">
        <a class="various fancybox.ajax" href="edit.jsf">
                     #{disciplina.nome}
        </a>    
    </p:column>

</p:dataTable>

As you can see, I want that when user click in a row he will redirected to "edit.jsf" (really, this just opens a modal with jQuery). So, what I need is:

When user click in a row, the row don't be selected.
The row must have a link or something like that, that have a class "various fancybox.ajax" and a link.

So, there's a way to do that with PrimeFaces dataTable? How can I solve this issue?

Edit

This is my new code, similar to @raylee answer:

<p:dataTable tableStyleClass="table table-hover" var="disciplina" value="#{disciplinaMBean.listaDisciplinasPesquisadas}" rowKey="#{disciplina.id}" selection="#{disciplinaMBean.disciplinaSelecionada}" selectionMode="single" emptyMessage="Nenhuma disciplina encontrada." >

    <p:column headerText="Nome" styleClass="pull-left">
        <p:lightBox iframe="true" width="100%" height="100%">

            <h:outputLink value="edit.jsf">
                <h:outputText value="#{disciplina.nome}" />
            </h:outputLink>

            <f:facet name="inline">
                <p:panel header="Editar disciplina">
                    <ui:include src="edit.xhtml" />
                </p:panel>
            </f:facet>  

        </p:lightBox>
     </p:column>
     <p:ajax event="rowSelect" listener="#{disciplinaMBean.limparSelecionadosDataTable}"/>

</p:dataTable>

The event="rowSelect", closer to the last line, just remove all selected rows (I don't want that when user click, the row be selected, and this is the way I found to fix that, because PrimeFaces don't give us a attribute to "selectOrClickRow" - I'm waiting for a feature like that).

MrRaymondLee MrRaymondLee · Accepted Answer · 2013-11-04T19:15:56

Here's an example using PrimeFaces lightbox. This is all the code you need. No jQuery or manually defining a dialog box. Notice the dataTable has no selection attribute so the user cannot select a row.

This is all you need:

<p:dataTable var="report" value="#{tab.reports}" 
    resizableColumns="true" paginator="true" rows="30">

    <p:column headerText="Title" width="20%">

        <p:lightBox iframe="true" width="100%" height="100%">

            <h:outputLink value="#{report.URL}" title="#{report.title}">

                <h:outputText value="#{report.title}" />

            </h:outputLink>

        </p:lightBox>

    </p:column>

    ...

</p:dataTable>

When user click in a row (dataTable), don't select row

Edit

1 Answers