0 Replies Latest reply on Mar 2, 2011 1:10 PM by eapostol

    Identifying pieSeriesItem / pieSlice that data is being dragged onto

    eapostol Level 1

      Hi everyone -

       

      I am extending <mx:PieChart> as a custom component for an application that I am creating.

       

      This pieChart has dropEnabled = true, so I can receive data dragged in from a <mx:DataGrid>.

       

      I have overridden the default event behavior's dragEnter, dragOver events (using event.preventDefault(), and the dragDrop Event is successfully receiving my data from my datagrid into the piechart.

       

      My problem is - I am updating data in an existing pie slice! So I need to know which pieSeriesItem I am dropping the data onto. The challenge is that in the dragDrop  event, I can get the pieChart object, I can get the pieSeries too, but I  can't identify a property (at least through debugging) which identifies  the pieSeriesItem I am dropping the data onto.

       

      Partial code is below.

            <mx:PieChart xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   creationComplete="piechart1_creationCompleteHandler(event)"
                   innerRadius="0.40"
                   showDataTips="true"
                   selectionMode="multiple"
                   itemClick="piechart1_itemClickHandler(event)"
                   dropEnabled="true"   
                   dragEnter="piechart1_dragEnterHandler(event)"
                   dragOver="piechart1_dragOverHandler(event)"
                   dragDrop="piechart1_dragDropHandler(event)"
                   itemRollOver="piechart1_itemRollOverHandler(event)"
                   alpha="0.5"
                   dataTipFunction="formatDataTips"
                  
                   >

       

             <!--other code not relevant to this question... -->
            <fx:Script>

       

             <![CDATA[
                  protected function clockPieSeries_dragEnterHandler(event:DragEvent):void
                  {
                      // TODO Auto-generated method stub
                      event.preventDefault();
                      trace("drag entered a slice");
                      var dragTarget:PieSeries = event.currentTarget as PieSeries;
                      DragManager.acceptDragDrop(dragTarget);
                      DragManager.showFeedback(DragManager.LINK);
                  }

       

                  protected function clockPieSeries_dragOverHandler(event:DragEvent):void
                  {
                      // TODO Auto-generated method stub
                      event.preventDefault();
                      trace("drag over a slice");
                  }

       

                  protected function clockPieSeries_dragDropHandler(event:DragEvent):void
                  {
                      // TODO Auto-generated method stub
                      // event.preventDefault();
                     
                      var dropTarget:PieSeries = event.currentTarget as PieSeries;
                      var dataObj:* = ((event.dragSource as DragSource).dataForFormat("items")[0]) as Object;
                      trace("drag dropped a slice");
                      // if I could identify the slice I was dropping the data too, I
                                      // could CHANGE THE SLICE COLOR for example...
                                      // however, this changes only the last selected slice...
                                      // setPieSliceColor(dropTarget.selectedItem as PieSeriesItem);
                  }
           
            ]]>
            </fx:Script>

       

       

          <mx:series>

       

             
              <mx:PieSeries id="clockPieSeries"
                   nameField="name"
                  field="_slotSize"
                  labelPosition="none"
                  renderDirection="clockwise"
                  labelFunction="formatPieLabels"
                  fills="{[0xffffff]}"
                  dragEnter="clockPieSeries_dragEnterHandler(event)"
                  dragDrop="clockPieSeries_dragDropHandler(event)"
                  dragOver="clockPieSeries_dragOverHandler(event)">
              </mx:PieSeries>
          </mx:series>

       

      </mx:PieChart>


      In the code snippet above, the only way I identify the slice that the data is being inserted into is based on the the last slice I clicked on (the **selectedItem**) property. I'd like to say basically - "when I Drop the data from the datagrid onto this slice, identify the slice I am dropping the data to and update the slice's data values".

       

      Any help or suggestions with this would be appreciated.

       

      regards,

       

      Edward