Exception thrown as Fieldset cannot be cast to UIData

Question

Trying to develop a drag and drop functionality. A fieldSet in a layout has to be dragged and imitate user as if it is being dropped into another layout. Below is the xhtml code for the same :-

<h:head>
    <script type="text/javascript">
        function handleDrop(event, ui) {
            var dropped = ui.draggable;

            dropped.fadeOut('fast');
        }
    </script>

</h:head>
<h:body>
 <h:form>
    HI
    <h1>Primefaces Basic Config</h1>


    <p:layout style="min-width:400px;min-height:200px;">

        <p:layoutUnit id="first" position="west">

            <p:fieldset id="ppl" legend="Builder" toggleable="true" toggleSpeed="500" style="width:300px">

                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Bla bla bla"></h:outputText>
                    </h:panelGrid>

            </p:fieldset>

            <p:draggable for="ppl" revert="true" />

        </p:layoutUnit>


        <p:layoutUnit id="second" position="center">

                 <p:tabView id="dropdownpanel">
                    <p:tab title="Edit">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText
                                value="Add question details" />
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="Option">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="addtional options required" />
                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="Logic">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="addd logic to this tab" />
                        </h:panelGrid>
                    </p:tab>
                 </p:tabView>

        </p:layoutUnit>

        <p:droppable for="second" tolerance="touch"  datasource="ppl" onDrop="handleDrop" >
            <p:ajax update="first second" />  
        </p:droppable>

    </p:layout>

  </h:form>
</h:body>

          </h:form>

Following is the screen shot of what i'm trying to achieve where builder fieldset can be dragged into edit area:-

But when i'm trying to drag BUILDER then following Exception is thrown :-

15:53:05,497 INFO [javax.enterprise.resource.webcontainer.jsf.context] (http-0.0.0.0-0.0.0.0-8081-1) java.lang.ClassCastException: org.primefaces.component.fieldset.Fieldset cannot be cast to javax.faces.component.UIData: java.lang.ClassCastException: org.primefaces.component.fieldset.Fieldset cannot be cast to javax.faces.component.UIData at org.primefaces.component.dnd.Droppable.findDatasource(Droppable.java:231) [primefaces-4.0.jar:4.0] at org.primefaces.component.dnd.Droppable.queueEvent(Droppable.java:189) [primefaces-4.0.jar:4.0] at org.primefaces.component.behavior.ajax.AjaxBehaviorRenderer.decode(AjaxBehaviorRenderer.java:44) [primefaces-4.0.jar:4.0] at javax.faces.component.behavior.ClientBehaviorBase.decode(ClientBehaviorBase.java:132) [jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at org.primefaces.renderkit.CoreRenderer.decodeBehaviors(CoreRenderer.java:395) [primefaces-4.0.jar:4.0] at org.primefaces.component.dnd.DroppableRenderer.decode(DroppableRenderer.java:32) [primefaces-4.0.jar:4.0] at javax.faces.component.UIComponentBase.decode(UIComponentBase.java:787) [jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at javax.faces.component.UIComponentBase.processDecodes(UIComponentBase.java:1181) [jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final]

And i've no clue to resolve.

Answer 1

The datasource attribute in your p:droppable element needs to refer to a UIData. Fieldset is not a UIData. If you look at the UIData Javadoc you will see that HtmlDatatable is a known subclass

I had the same problem and resolved by referencing my datatable instead of the fieldset. In your case you are using a h:panelGrid, so change

   <h:panelGrid columns="2" cellpadding="5" >

to a datatable, give it an ID. Say "datasrc1". And change your droppable's datasource to:

   <p:droppable for="second" tolerance="touch"  datasource="datasrc1" onDrop="handleDrop" >