Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use PrimeFaces p:droppable inside datatable?

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>
like image 702
Margus Pala Avatar asked Jan 24 '11 22:01

Margus Pala


Video Answer


1 Answers

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

like image 119
Mark Avatar answered Nov 03 '22 21:11

Mark