How to use PrimeFaces p:droppable inside datatable?

6
votes

There is business need to categorize items. Best idea seems to be dragdrop items from one list into list of categories. Number of categories can vary so p:dataTable is used. Ajax request is sent but onDrop method is not called from inside dataTable. When Removing datatable and column and having outputpanels statically then onDrop is called?

How to best drag and drop items into dynamically changing categories?

        <h:form prependId="false">
            <h:panelGrid columns="2">
                <p:dataTable id="itemstable" value="#{categoryBean.items}" var="item">
                    <p:column>
                        <p:outputPanel id="itemrow">
                            <h:outputText value="#{item}"></h:outputText>
                        </p:outputPanel>
                        <p:draggable for="itemrow"></p:draggable>
                    </p:column>
                </p:dataTable>

                <p:dataTable value="#{categoryBean.categories}" var="cat">
                    <p:column>
                        <p:outputPanel id="cats1">
                            <h:outputText value="category1"></h:outputText>
                        </p:outputPanel>
                        <p:droppable for="cats1"
                                     dropListener="#{categoryBean.onDrop}"
                                     tolerance="pointer"
                                     activeStyleClass="slotActive"
                                     datasource="itemstable">
                        </p:droppable>
                    </p:column>
                </p:dataTable>
            </h:panelGrid>
        </h:form>
1
ajaxjsfdatatableprimefaces

1 Answers

5
votes

There is a bug in PrimeFaces, when <p:droppable> is nested in any data repeating element the dropListener does not get called. I also tried using the Facelets repeat tag <ui:repeat> but the dropListener was not called just like dragging to the <p:dataTable> .

In the PrimeFaces showcase all of the drag an drop examples have static droppable areas.
PrimeFaces ShowCase