CODEWITHSUNDEEP
primefacesjsf-2datatable
Wagner Faria
Wagner Faria

Reputation: 96

'component does not support event' error on creating an composite component from p:dataTable

I get the following Error on creating an composite component from primefaces dataTable. What am I doing wrong !?

Exception 

    javax.faces.view.facelets.TagException: /view/restrito/basico/municipio.xhtml @77,165 <p:ajax> Composite component does not support event rowSelect

tabela-padrao.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:cc="http://xmlns.jcp.org/jsf/composite"
  xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:h="http://xmlns.jcp.org/jsf/html">

<!-- INTERFACE -->
<cc:interface>
    <cc:attribute name="uniqueId" required="true" />
    <cc:attribute name="value" required="true" />
    <cc:attribute name="var" required="true" />
    <cc:attribute name="selection" required="true" />
    <cc:attribute name="exportedFileName" required="true" />
    <cc:attribute name="renderedTable" default="true"/>
    <cc:attribute name="primaryKey" required="true"/>

</cc:interface>

<!-- IMPLEMENTATION -->
<cc:implementation>
    <p:dataTable value="#{cc.attrs.value}" 
                 id="#{cc.attrs.uniqueId}"
                 scrollable="true"
                 scrollWidth="100%"
                 var="#{cc.attrs.var}"
                 rendered="#{cc.attrs.renderedTable}"
                 selection="#{cc.attrs.selection}"
                 rowKey="#{cc.attrs.primaryKey}"                                             
                 selectionMode="single"
                 paginator="true"
                 rowsPerPageTemplate="15,30,45"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}"
                 emptyMessage="#{bundle.tabela_nenhum_registro_encontrado}">
        <cc:insertChildren/>
        <f:facet name="{Exporters}">
            <h:commandLink style="padding: 5px 5px 5px 5px ;" title="Converter para Excel" >                                            
                <h:outputText  styleClass="fa fa-file-excel-o Fs20"/>
                <p:dataExporter type="xls" target="#{cc.attrs.uniqueId}" fileName="#{cc.attrs.exportedFileName}" />
            </h:commandLink>
            <h:commandLink style="padding: 5px 5px 5px 5px ;" title="Converter para PDF" >
                <h:outputText  styleClass="fa fa-file-pdf-o Fs20"/>
                <p:dataExporter type="pdf" target="#{cc.attrs.uniqueId}" fileName="#{cc.attrs.exportedFileName}"/>
            </h:commandLink>
        </f:facet>
    </p:dataTable> 
</cc:implementation>

Using the Composite Component / Usando o componente

<h:form id="tabela-municipio">
                    <ezcomp:tabela-padrao value="#{municipioMB.listaMunicipios}"
                                          uniqueId="id-tabela-municipio"
                                          var="mun" 
                                          primaryKey="#{mun.id}"
                                          selection="#{municipioMB.municipio}"
                                          exportedFileName="municipios">
                        <p:ajax event="rowSelect" listener="#{municipioMB.onRowSelect}" update="@(form[id*='frm-municipio']),@(form[id*='tabela-municipio'])" />
                        <p:ajax event="rowUnselect" listener="#{municipioMB.onRowUnselect}" update="@(form[id*='frm-municipio']),@(form[id*='tabela-municipio'])" />
                        <p:column headerText="Pais" width="300" filterBy="#{mun.estado.pais.nome}" filterMatchMode="contains">
                            <h:outputText value="#{mun.estado.pais.nome}"/>
                        </p:column>
                        <p:column headerText="Estado" width="300" filterBy="#{mun.estado.sigla} - #{mun.estado.nome}" filterMatchMode="contains">
                            <h:outputText value="#{mun.estado.sigla} - #{mun.estado.nome}"/>
                        </p:column>
                        <p:column headerText="Município" filterBy="#{mun.nome}" filterMatchMode="contains">
                            <h:outputText value="#{mun.nome}"/>
                        </p:column>
                    </ezcomp:tabela-padrao>
                </h:form>

Upvotes: 3

Views: 2550

Answers (1)

Sumit Gulati
Sumit Gulati

Reputation: 675

You have to create and register the custom events in your composite component and pass the corresponding actions to datatable. As rowSelect and rowUnselect events are register on datatable not a composite component. Use clientBehavior to register the events for composite component.

<cc:interface>
    ...
    <cc:clientBehavior name="customRowSelectEvent" targets="idOfDataTable" event="rowSelect" />
    <cc:clientBehavior name="customRowUnselectEvent" targets="idOfDataTable" event="rowUnselect" />
</cc:interface>
  1. name is name of the custom event.
  2. targets is the id of component for which you want to actually register the action. In your case id of datatable.
  3. event is the actual event which you want to register for the datatable.

Now register the events for composite components. 

<ezcomp:tabela-padrao ....>
    <f:ajax event="customRowSelectEvent" listener="#{municipioMB.onRowSelect}" update="@(form[id*='frm-municipio']),@(form[id*='tabela-municipio'])" />
    <f:ajax event="customRowUnselectEvent" listener="#{municipioMB.onRowUnselect}" update="@(form[id*='frm-municipio']),@(form[id*='tabela-municipio'])" />
      .....                  
</ezcomp:tabela-padrao>

Upvotes: 7

Related Questions