Using dataTable Primefaces

Question

Hello,

I am using the dataTable object of primefaces to display some data and I am having some problems to realize something : I display first a table with only 1 column and I want to display another table filled with data depending on what the user selected on the first one.

For that, when the user selects a row in the first table, I fill the currentCorbeilleId record of my TaskController and try to update the form "tasksList". It makes sense when I write that now but it does not work... When I click on a row of the first table, nothing happens...

Am I using the dataTable component the right way? What should I do more to make it works? Thank you for your answers !

<f:view>
        <h:form id="mainForm">
            <p:dataTable id="corbeillesList"
                         value="#{IdentityController.groups}"
                         var="corbeillesList"
                         rendered="#{not empty IdentityController.groups}"
                         selectionMode="single"
                         selection="#{TaskController.currentCorbeilleId}"
                         update="tasksList">
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name" />
                    </f:facet>
                    <h:commandLink value="#{corbeillesList.name}">
                    </h:commandLink>
                </p:column>
            </p:dataTable>
            <p:dataTable id="tasksList"
                         value="#{TaskController.tasks}"
                         var="task"
                         rendered="#{not empty TaskController.tasks}"
                         selectionMode="single">
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Date" />
                    </f:facet>
                    <h:outputText value="#{task.duedate}" rendered="#{task.duedate != null}">
                        <f:convertDateTime pattern="dd/MM/yyyy" type="date" dateStyle="short" />
                    </h:outputText>
                    <h:outputText value="Date non definit" rendered="#{task.duedate == null}" />
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name" />
                    </f:facet>
                    <h:outputText value="#{task.name}" />
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Description" />
                    </f:facet>
                    <h:outputText value="#{task.description}" />
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Verouillee" />
                    </f:facet>
                    <h:outputText value="oui" rendered="#{task.assignee != null}" />
                    <h:outputText value="non" rendered="#{task.assignee == null}" />
                </p:column>
            </p:dataTable>
        </h:form>
    </f:view>

Answer 1

The second datatable has not been rendered to the client side. So it's not reachable for ajax update. Put it in for example a h:panelGroup instead which is always rendered to the client side.

<h:panelGroup id="tasksList">
    <h:dataTable rendered="#{not empty TaskController.tasks}" ... >
        ...
    </h:dataTable>
</h:panelGroup>