15 Replies Latest reply on Jun 3, 2010 6:02 AM by BhaskerChari

    Drag and drop data from datagrid to textInput with flex.

    satyasuppu Level 1

      Hi,

       

        Cay please help me out on this problem..

       

       

        I have a datagid with some values..I have a textInput on the UI..

      There is one "+" button on the UI..when i click on that button it will add one more TextInput box to the UI below the first TextInput..Like thiseverytime  when you click on the "+" button it will add one more TextInput to the UI just below the previous one..

       

       

      Now i want to drag the values from datagrid to Textinput boxes..User may drag two or more vlaues to each textInput upon his requirement..

       

      How can i drag ...could you please help me out on thi issue....

       


      I am not able to drag the values to TextInputs:

       

       

      Here is my code:::Could anyone please help me...

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">

       


      <mx:Script>
                  <![CDATA[
                      import mx.containers.HBox;
                      import mx.controls.Alert;
                      import mx.managers.PopUpManager;
                  //    import Components.testPopUpWindow;
                      import mx.core.UIComponent;
                      import mx.containers.TitleWindow;
                      import mx.core.DragSource;
                     // import mx.core.IUIComponent;
                      import mx.managers.DragManager;
                      import mx.events.DragEvent;
                      import mx.controls.Alert;
                      import mx.controls.Text;
                      import flash.geom.Point;
                 
                     
         
                 
                   import mx.collections.ArrayCollection;
                   [Bindable]
                  private var dpFlat:ArrayCollection = new ArrayCollection([
                                       {JobName:"A"},
                                      {JobName:"B"}, 
                                      {JobName:"C"},
                                      {JobName:"D"}, 
                                      {JobName:"E"},
                                      {JobName:"F"},
                                      {JobName:"G"}]);
                   
                    private function box_addChild():void
                  {
                 
                          var box:HBox = new HBox();
                             box.width=716;
                             var descriptionTextInput:TextInput = new TextInput();
                             var strButton:Button=new Button();
                            strButton.label="Submit";
                           descriptionTextInput.width=174;
                           descriptionTextInput.height=58;
                           box.addChild(descriptionTextInput);
                          /*     box.addChild(strButton); */
                          //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                           interactiveQuestionsVBoxID.addChild(box);
                 
                  }
                 
            public function init():void
            {
                   
              this.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
              this.addEventListener( DragEvent.DRAG_DROP, handleDrop );
            
            }
                 
                 
                 
         
            public function acceptDrop( dragEvent:DragEvent ):void
            {
              if (dragEvent.dragSource.hasFormat("items"))
              {
                DragManager.showFeedback( DragManager.COPY );
                DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
              }
            }
         
            var pt:Point;
            public function handleDrop( dragEvent:DragEvent ):void
            {
             // var dragInitiator:UIComponent = dragEvent.dragInitiator;
              //var dropTarget:UIComponent = dragEvent.currentTarget as UIComponent;
              var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
              /* pt = new Point(dragEvent.localX, dragEvent.localY);
              pt = dragEvent.target.localToContent(pt);
              var img:TextInput = new TextInput();
                img.x=dragEvent.localX;   img.y=dragEvent.localY;
             // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
              img.width = 50;
              img.height=50;
              img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
              img.text=items[0].JobName.toString();
            
               img.buttonMode = true;
               img.mouseChildren = false;
              
                TextInput(event.currentTarget).text=itemsArray[0].label;
              
               var itemsArray:Array = event.dragSource.dataForFormat("items") as Array; */
                      TextInput(dragEvent.currentTarget).text=items[0].label;
              }
             
             
               public function beginDrag( mouseEvent:MouseEvent ):void
            {
               
              var dragInitiator:TextInput = mouseEvent.currentTarget as TextInput;
              var dragSource:DragSource = new DragSource();
             // dsource.addData(this, 'node');
              dragSource.addData(this.mouseX, 'mouseX');
              dragSource.addData(this.mouseY, 'mouseY');
              //parent.addChild(dragImg);
              //dragSource.addData(mouseEvent.currentTarget.text, "txt");
              try{
                  var dragProxy:TextInput=new TextInput();
                  dragProxy.text = mouseEvent.currentTarget.text;
                     // Alert.show("Text isss"+dragProxy.text);
                     dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
             
                  // ask the DragManger to begin the drag
                  DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
              }
              catch(e){}   
         
            }
           
                    ]]>
          </mx:Script>
         
         
      <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >

       

      <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>

       

      <!--<mx:Label id="lbl"   text="Job Name" width="195" height="28"  x="0" y="0" fontWeight="bold"/>-->
      <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
          
          <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
          <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
          <!--<mx:Button label="-" width="71" fontWeight="bold" click="box_deleteChild();"/>-->
      </mx:Box>

       

      <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
                       <!--<mx:Box id="boxID" direction="horizontal" width="268" height="58">-->
                           <mx:TextInput id="t1" width="174" dragDrop="handleDrop(event)"    height="58"/>
                           <!--<mx:Button label="Submit" id="b1" />-->
                          
                    <!--    </mx:Box>-->
      </mx:VBox>
             
              </mx:Canvas>
      </mx:Application>

        • 1. Re: Drag and drop data from datagrid to textInput with flex.
          BhaskerChari Level 4

          Hi Satya,

           

          I have done it for you ...please copy the below whole code and try to run the application. You can see the application working for you.

           

          You have done two mistakes --- you have added the event listeners on this object........but this refers to current object(i.e; your main application file but not TextInput).

           

          So you need to addEventListeners for your textinput "t1" but not to this...

           

          If you add the listeners on this then in your "acceptDrop" and "handleDrop" functions you will get the "dragEvent.currentTarget" as your main app but not TextInput(Since you have added listeners to "this "). If you addListeners on t1 then its correct.

           

          Also you need to add the eventListeners for the newly added textboxes as I done in "box_addChild" function in below code.

           

          Also in the handleDrop function the line of code where you are assigning the text is wrong ......it should be the below code...

           

          TextInput(dragEvent.currentTarget).text=items[0].JobName;

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
          <mx:Script> 
            <![CDATA[
                          import mx.containers.HBox;
                          import mx.controls.Alert;
                          import mx.managers.PopUpManager;
                      //    import Components.testPopUpWindow;
                          import mx.core.UIComponent;
                          import mx.containers.TitleWindow;
                          import mx.core.DragSource;
                         // import mx.core.IUIComponent;
                          import mx.managers.DragManager;
                          import mx.events.DragEvent;
                          import mx.controls.Alert;
                          import mx.controls.Text;
                          import flash.geom.Point;
                     
                         
             
                     
                     import mx.collections.ArrayCollection;
                     [Bindable]
                     private var dpFlat:ArrayCollection = new ArrayCollection([
                                           {JobName:"A"},
                                          {JobName:"B"}, 
                                          {JobName:"C"},
                                          {JobName:"D"}, 
                                          {JobName:"E"},
                                          {JobName:"F"},
                                          {JobName:"G"}]);
                       
                      private function box_addChild():void
                      {
                          var box:HBox = new HBox();
                          box.width=716;
                          var descriptionTextInput:TextInput = new TextInput();
                          var strButton:Button=new Button();
                          strButton.label="Submit";
                          descriptionTextInput.width=174;
                          descriptionTextInput.height=58;
                          descriptionTextInput.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                 descriptionTextInput.addEventListener( DragEvent.DRAG_DROP, handleDrop );
             
                           box.addChild(descriptionTextInput);
                          /*     box.addChild(strButton); */
                          //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                           interactiveQuestionsVBoxID.addChild(box);
                      }
                     
          public function init():void
          {
                        
               t1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
               t1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                 
          }
             
                public function acceptDrop( dragEvent:DragEvent ):void
                {
                  if (dragEvent.dragSource.hasFormat("items"))
                  {
                    DragManager.showFeedback( DragManager.COPY );
                    DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
                  }
                }
             
                private var pt:Point;
                public function handleDrop( dragEvent:DragEvent ):void
                {
                 // var dragInitiator:UIComponent = dragEvent.dragInitiator;
                  //var dropTarget:UIComponent = dragEvent.currentTarget as UIComponent;
                  var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                  /* pt = new Point(dragEvent.localX, dragEvent.localY);
                  pt = dragEvent.target.localToContent(pt);
                  var img:TextInput = new TextInput();
                    img.x=dragEvent.localX;   img.y=dragEvent.localY;
                 // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                    //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                  img.width = 50;
                  img.height=50;
                  img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
                  img.text=items[0].JobName.toString();
                
                   img.buttonMode = true;
                   img.mouseChildren = false;
                  
                    TextInput(event.currentTarget).text=itemsArray[0].label;
                  
                   var itemsArray:Array = event.dragSource.dataForFormat("items") as Array; */
                    var currTarget:* = dragEvent.currentTarget;
                    //interactiveQuestionsVBoxID = currTarget.getChildByName("interactiveQuestionsVBoxID");
                      TextInput(dragEvent.currentTarget).text=items[0].JobName;
                  }
                 
                 
                public function beginDrag( mouseEvent:MouseEvent ):void
                {
                   
                  var dragInitiator:TextInput = mouseEvent.currentTarget as TextInput;
                  var dragSource:DragSource = new DragSource();
                 // dsource.addData(this, 'node');
                  dragSource.addData(this.mouseX, 'mouseX');
                  dragSource.addData(this.mouseY, 'mouseY');
                  //parent.addChild(dragImg);
                  //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                  try{
                      var dragProxy:TextInput=new TextInput();
                      dragProxy.text = mouseEvent.currentTarget.text;
                         // Alert.show("Text isss"+dragProxy.text);
                         dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
                 
                      // ask the DragManger to begin the drag
                      DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
                  }
                  catch(e:Error){}   
             
                }
               
               ]]>
          </mx:Script>
              <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
            <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
            <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
                <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
                <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
            </mx:Box>
            <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
              <mx:TextInput id="t1" width="174" dragDrop="handleDrop(event)" height="58"/>                    
            </mx:VBox>
          </mx:Canvas>
          </mx:Application>

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: Drag and drop data from datagrid to textInput with flex.
            satyasuppu Level 1

            Hi,

             

             

              Thank you so much for your help..Its working the way i want..I understood what are the mistakes i did..Thanks alot for ur time...

             

            And more thing,when i drop multiple values on the same TextInput the new values is replacing the old one..But i don't want that kind of behaviour..when i add two or more values ,those should add after the first one..Could you please help me on this...

             

             

            Thanks inadvance..

            • 3. Re: Drag and drop data from datagrid to textInput with flex.
              BhaskerChari Level 4

              Hi,

               

              If this post answers your question or helps, please kindly mark it as such.

               

              You can use the below code...now

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
              <mx:Script> 
                <![CDATA[
                              import mx.containers.HBox;
                              import mx.controls.Alert;
                              import mx.managers.PopUpManager;
                          //    import Components.testPopUpWindow;
                              import mx.core.UIComponent;
                              import mx.containers.TitleWindow;
                              import mx.core.DragSource;
                             // import mx.core.IUIComponent;
                              import mx.managers.DragManager;
                              import mx.events.DragEvent;
                              import mx.controls.Alert;
                              import mx.controls.Text;
                              import flash.geom.Point;
                         
                             
                 
                         
                         import mx.collections.ArrayCollection;
                         [Bindable]
                         private var dpFlat:ArrayCollection = new ArrayCollection([
                                               {JobName:"A"},
                                              {JobName:"B"}, 
                                              {JobName:"C"},
                                              {JobName:"D"}, 
                                              {JobName:"E"},
                                              {JobName:"F"},
                                              {JobName:"G"}]);
                           
                          private function box_addChild():void
                          {
                              var box:HBox = new HBox();
                              box.width=716;
                              var descriptionTextInput:TextInput = new TextInput();
                              var strButton:Button=new Button();
                              strButton.label="Submit";
                              descriptionTextInput.width=174;
                              descriptionTextInput.height=58;
                              descriptionTextInput.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                     descriptionTextInput.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                 
                               box.addChild(descriptionTextInput);
                              /*     box.addChild(strButton); */
                              //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                               interactiveQuestionsVBoxID.addChild(box);
                          }
                         
              public function init():void
              {
                            
                   t1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                   t1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                     
              }
                 
                    public function acceptDrop( dragEvent:DragEvent ):void
                    {
                      if (dragEvent.dragSource.hasFormat("items"))
                      {
                        DragManager.showFeedback( DragManager.COPY );
                        DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
                      }
                    }
                 
                    private var pt:Point;
                    public function handleDrop( dragEvent:DragEvent ):void
                    {
                     // var dragInitiator:UIComponent = dragEvent.dragInitiator;
                      //var dropTarget:UIComponent = dragEvent.currentTarget as UIComponent;
                      var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                      /* pt = new Point(dragEvent.localX, dragEvent.localY);
                      pt = dragEvent.target.localToContent(pt);
                      var img:TextInput = new TextInput();
                        img.x=dragEvent.localX;   img.y=dragEvent.localY;
                     // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                        //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                      img.width = 50;
                      img.height=50;
                      img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
                      img.text=items[0].JobName.toString();
                    
                       img.buttonMode = true;
                       img.mouseChildren = false;
                      
                        TextInput(event.currentTarget).text=itemsArray[0].label;
                      
                       var itemsArray:Array = event.dragSource.dataForFormat("items") as Array; */
                        var currTarget:* = dragEvent.currentTarget;
                        //interactiveQuestionsVBoxID = currTarget.getChildByName("interactiveQuestionsVBoxID");
                          TextInput(dragEvent.currentTarget).text += items[0].JobName;
                      }
                     
                     
                    public function beginDrag( mouseEvent:MouseEvent ):void
                    {
                       
                      var dragInitiator:TextInput = mouseEvent.currentTarget as TextInput;
                      var dragSource:DragSource = new DragSource();
                     // dsource.addData(this, 'node');
                      dragSource.addData(this.mouseX, 'mouseX');
                      dragSource.addData(this.mouseY, 'mouseY');
                      //parent.addChild(dragImg);
                      //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                      try{
                          var dragProxy:TextInput=new TextInput();
                          dragProxy.text = mouseEvent.currentTarget.text;
                             // Alert.show("Text isss"+dragProxy.text);
                             dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
                     
                          // ask the DragManger to begin the drag
                          DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
                      }
                      catch(e:Error){}   
                 
                    }
                   
                   ]]>
              </mx:Script>
                  <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
                <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
                <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
                    <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
                    <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
                </mx:Box>
                <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
                  <mx:TextInput id="t1" width="174" height="58"/>                    
                </mx:VBox>
              </mx:Canvas>
              </mx:Application>

               

              Thanks,

              Bhasker Chari

              1 person found this helpful
              • 4. Re: Drag and drop data from datagrid to textInput with flex.
                satyasuppu Level 1

                Hi,

                 

                Thanks for your answer..Its working..

                 

                I added save button...When i click on Save button i need to capture all the values from textInput boxes and need to save..

                I am not able capture the values from the textboxes..

                 

                Below is the code i added ..Colud you please check it once and tell where i did the mistake..Iam not able to figure it out...

                 

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
                <mx:Script>
                  <![CDATA[
                                import mx.containers.HBox;
                                import mx.controls.Alert;
                                import mx.managers.PopUpManager;
                            //    import Components.testPopUpWindow;
                                import mx.core.UIComponent;
                                import mx.containers.TitleWindow;
                                import mx.core.DragSource;
                               // import mx.core.IUIComponent;
                                import mx.managers.DragManager;
                                import mx.events.DragEvent;
                                import mx.controls.Alert;
                                import mx.controls.Text;
                                import flash.geom.Point;
                          
                              
                  
                          
                           import mx.collections.ArrayCollection;
                           [Bindable]
                           private var dpFlat:ArrayCollection = new ArrayCollection([
                                                 {JobName:"A"},
                                                {JobName:"B"},
                                                {JobName:"C"},
                                                {JobName:"D"},
                                                {JobName:"E"},
                                                {JobName:"F"},
                                                {JobName:"G"}]);
                            
                            private function box_addChild():void
                            {
                                var box:Box = new Box();
                                box.width=716;
                                var descriptionTextInput:TextInput = new TextInput();
                                var strButton:Button=new Button();
                                strButton.label="Submit";
                                descriptionTextInput.width=174;
                                descriptionTextInput.height=58;
                                descriptionTextInput.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                                descriptionTextInput.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                  
                                 box.addChild(descriptionTextInput);
                                /*     box.addChild(strButton); */
                                //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                                 interactiveQuestionsVBoxID.addChild(box);
                            }
                          
                public function init():void
                {
                             
                     t1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                     t1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                      
                }
                  
                      public function acceptDrop( dragEvent:DragEvent ):void
                      {
                        if (dragEvent.dragSource.hasFormat("items"))
                        {
                          DragManager.showFeedback( DragManager.COPY );
                          DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
                        }
                      }
                  
                      private var pt:Point;
                      public function handleDrop( dragEvent:DragEvent ):void
                      {
                      
                        var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                        var currTarget:* = dragEvent.currentTarget;
                        TextInput(dragEvent.currentTarget).text+= items[0].JobName;
                     
                        }
                      
                      
                       public function saveData():void
                      {
                         
                        var i:uint;
                       
                        for(i = 0; i < interactiveQuestionsVBoxID.numChildren; i++)
                        {
                             
                            var box:Box = interactiveQuestionsVBoxID.getChildAt(i) as Box; //dynamically creating the interactive question and answer Box component

                 

                            var descriptionTextInput:TextInput = box.getChildAt(0) as TextInput;
                            Alert.show("hi");
                            Alert.show(descriptionTextInput.text);
                           
                                           
                      
                        }
                      }
                    
                     ]]>
                </mx:Script>
                    <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
                  <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
                  <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
                      <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
                      <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
                  </mx:Box>
                  <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
                    <mx:TextInput id="t1" width="174" height="58"/>                   
                  </mx:VBox>
                  <mx:Button x="560" y="379" label="Save" click="saveData()"/>
                </mx:Canvas>
                </mx:Application>

                 

                Thanks in advance...

                • 5. Re: Drag and drop data from datagrid to textInput with flex.
                  BhaskerChari Level 4

                  Hi,

                   

                  How do you want to save the values ...?

                   

                  Do you want all the values to be concatenated into a single string...or do you want any seperator to be indicated between the individual values?

                   

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: Drag and drop data from datagrid to textInput with flex.
                    satyasuppu Level 1

                    Hi,

                     

                    I want a seperator to be indicated between the individual  values and i want get these individual values from the textinput boxes and save those values when i click on save button

                     

                     

                    Thanks inadvance..

                    • 7. Re: Drag and drop data from datagrid to textInput with flex.
                      BhaskerChari Level 4

                      Hi satyasuppu,

                       

                      The main mistake you have done is ....not placing the below line inside a Box container.

                       

                      <mx:TextInput id="t1" width="174" height="58"/>

                       

                      In your function saveData() since you are accessing as

                       

                      var box:Box = interactiveQuestionsVBoxID.getChildAt(i) as Box; //dynamically creating the interactive question and answer Box component

                       

                      So since you have not put the first textinput "t1" inside Box container so by using the above line of code for the first time you will get the reference to the textinput "t1" but not the Box. So null will be stored in you box variable.

                       

                      In your next line of code you are accessing box variable as below:

                       

                      var descriptionTextInput:TextInput = box.getChildAt(0) as TextInput;

                       

                      Since your box variable is null you cannot access the properties of a null object and as a result the following actionscript error will be thrown:

                       

                      TypeError: Error #1009: Cannot access a property or method of a null object reference.
                      at PPPPP/saveData()[E:\FlexWorkSpace\ForumSample\src\PPPPP.mxml:86]
                      at PPPPP/___PPPPP_Button2_click()[E:\FlexWorkSpace\ForumSample\src\PPPPP.mxml:106]

                       


                      So firstly you need to place the "t1" TextInput inside a Box control.

                       

                      <mx:Box width="716">
                          <mx:TextInput id="t1" width="174" height="58"/>
                      </mx:Box>

                       

                      After that you need to adjust your saveData() function as below:

                       

                      public function saveData():void
                            {
                              var i:uint;
                              var strTotalValues:String="";
                              for(i = 0; i < interactiveQuestionsVBoxID.numChildren; i++)
                              {
                                  var box:Box = interactiveQuestionsVBoxID.getChildAt(i) as Box; //dynamically creating the interactive question and answer Box component
                                  var descriptionTextInput:TextInput = box.getChildAt(0) as TextInput;
                                  strTotalValues +=  descriptionTextInput.text;
                                  //Alert.show(descriptionTextInput.text);
                              }
                              Alert.show(strTotalValues);
                            }

                       

                       

                      If this post answers your question or helps, please kindly mark it as such.


                      Thanks,

                      Bhasker Chari

                       

                      • 8. Re: Drag and drop data from datagrid to textInput with flex.
                        satyasuppu Level 1

                        Hi BhaskerChari,

                         

                         

                        Thank you so much for clearing my doubt..I got it...

                         

                        I have changed my code according to what you said..But save button is not working..

                         

                         

                         

                        Thanks,

                        Saritha

                        • 9. Re: Drag and drop data from datagrid to textInput with flex.
                          BhaskerChari Level 4

                          Hi Satya,

                           

                          Use the below code....

                           

                          <?xml version="1.0" encoding="utf-8"?>
                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
                          <mx:Script>
                            <![CDATA[
                                          import mx.containers.HBox;
                                          import mx.controls.Alert;
                                          import mx.managers.PopUpManager;
                                      //    import Components.testPopUpWindow;
                                          import mx.core.UIComponent;
                                          import mx.containers.TitleWindow;
                                          import mx.core.DragSource;
                                         // import mx.core.IUIComponent;
                                          import mx.managers.DragManager;
                                          import mx.events.DragEvent;
                                          import mx.controls.Alert;
                                          import mx.controls.Text;
                                          import flash.geom.Point;
                                    
                                        
                            
                                    
                                     import mx.collections.ArrayCollection;
                                     [Bindable]
                                     private var dpFlat:ArrayCollection = new ArrayCollection([
                                                           {JobName:"A"},
                                                          {JobName:"B"},
                                                          {JobName:"C"},
                                                          {JobName:"D"},
                                                          {JobName:"E"},
                                                          {JobName:"F"},
                                                          {JobName:"G"}]);
                                      
                                      private function box_addChild():void
                                      {
                                          var box:Box = new Box();
                                          box.width=716;
                                          var descriptionTextInput:TextInput = new TextInput();
                                          var strButton:Button=new Button();
                                          strButton.label="Submit";
                                          descriptionTextInput.width=174;
                                          descriptionTextInput.height=58;
                                          descriptionTextInput.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                                          descriptionTextInput.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                            
                                           box.addChild(descriptionTextInput);
                                          /*     box.addChild(strButton); */
                                          //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                                           interactiveQuestionsVBoxID.addChild(box);
                                      }
                                    
                            public function init():void
                            {
                                         
                                 t1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                                 t1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                                  
                            }
                            
                                public function acceptDrop( dragEvent:DragEvent ):void
                                {
                                  if (dragEvent.dragSource.hasFormat("items"))
                                  {
                                    DragManager.showFeedback( DragManager.COPY );
                                    DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
                                  }
                                }
                            
                                private var pt:Point;
                                public function handleDrop( dragEvent:DragEvent ):void
                                {
                                
                                  var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                                  var currTarget:* = dragEvent.currentTarget;
                                  TextInput(dragEvent.currentTarget).text += items[0].JobName;
                               
                                  }
                                
                                
                                public function saveData():void
                                {
                                  var i:uint;
                                  var strTotalValues:String="";
                                  var seperatorString:String = "::";
                                 
                                  for(i = 0; i < interactiveQuestionsVBoxID.numChildren; i++)
                                  {
                                      var box:Box = interactiveQuestionsVBoxID.getChildAt(i) as Box; //dynamically creating the interactive question and answer Box component
                                      var descriptionTextInput:TextInput = box.getChildAt(0) as TextInput;
                                      strTotalValues +=  descriptionTextInput.text + seperatorString;
                                      //Alert.show(descriptionTextInput.text);
                                  }
                                  strTotalValues = strTotalValues.substring(0,strTotalValues.length-seperatorString.length);
                                  Alert.show(strTotalValues);
                                }
                              
                               ]]>
                          </mx:Script>
                              <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
                            <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
                            <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
                                <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
                                <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
                            </mx:Box>
                            <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
                             <mx:Box width="716">
                              <mx:TextInput id="t1" width="174" height="58"/>
                             </mx:Box>                       
                            </mx:VBox>
                            <mx:Button x="560" y="379" label="Save" click="saveData()"/>
                          </mx:Canvas>

                          </mx:Application>

                          I have also put the seperator for you....

                           

                          You can put the seperator you like in the line...above...if you dont want seperator simply set the variable to empty string..

                           

                          var seperatorString:String = "::";

                           

                          If this post answers your question or helps, please kindly mark it as such.


                          Thanks,

                          Bhasker Chari

                          1 person found this helpful
                          • 10. Re: Drag and drop data from datagrid to textInput with flex.
                            satyasuppu Level 1

                            Hi,

                             

                            Thank you so much for your help..Its working now...

                             

                            I just want to know one thing...Can we design a workflow diagrams using flex and need to save those diagrams..Can you tell me whether it is feasible in flex..

                             

                             

                             

                            Thanks alot ..

                            • 11. Re: Drag and drop data from datagrid to textInput with flex.
                              BhaskerChari Level 4

                              Hi,

                               

                              Try referring this link below:

                               

                              http://www.yworks.com/en/products_yfiles_web_about.html?gclid=CIS56KWn_qECFUxB6wodjnIqEw

                               

                               

                              You will find the needful.

                               

                              Thanks,

                              Bhasker Chari

                              • 12. Re: Drag and drop data from datagrid to textInput with flex.
                                satyasuppu Level 1

                                Hi,

                                 

                                 

                                Thank you so much..I am not getting that link..I think it won't be useful in my application...

                                 

                                what i want is::

                                 

                                I have a datagrid..User will drag and drop the data from the datagrid and place it on some container(Canvas)..After droping it on UI there should be one starting point..after that he will connect all the values and design diagram..

                                 

                                In my application datagrid has some scripts..These scripts run in hostes in different sequence..User will provide that sequence by connecting all the values which u drag and drop on the UI..(sequence means  which script should run first after that which scripts should run..ie..the way scripts shuold run in hosts)

                                 

                                After designing the diagram user needs to save this sequence..(Means order of the scripts which run in hosts ...)

                                 

                                Here need to get the script names from the UI according to the  sequence ,the user has drwan on the UI..

                                 

                                 

                                Please let me know whether it is feasible in flex or not.....I worked on this problems since 2weeks...i searched in google..but couldn't find any solution..

                                 

                                 

                                Please tell me whether it is feasible in flex or not.....

                                 

                                 

                                Thanks

                                Saritha

                                • 13. Re: Drag and drop data from datagrid to textInput with flex.
                                  BhaskerChari Level 4

                                  Hi,

                                   

                                  I am not sure about this....but I hope there might be a defenite way for this..

                                   

                                  I will try to checkout and let you know.

                                   

                                  Give your mailid so that If i find anything I will mail you.

                                   

                                  Thanks,

                                  Bhasker Chari

                                  • 14. Re: Drag and drop data from datagrid to textInput with flex.
                                    satyasuppu Level 1

                                    Hi,

                                     

                                    Here is my email id:::saritha_233@yahoo.com...Please Please email me if you find any solution...

                                     

                                     

                                    Here is the code what i did::But there is no start point..From starting point we need to draw a diagram..

                                     

                                     

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                      layout="absolute" name="Drag and Drop Tutorial"
                                      creationComplete="init()" >
                                      <mx:Script>
                                        <![CDATA[
                                          import mx.controls.Image;
                                          import mx.core.DragSource;
                                          import mx.core.IUIComponent;
                                          import mx.managers.DragManager;
                                          import mx.events.DragEvent;
                                          import mx.controls.Alert;
                                          import mx.controls.Text;
                                          import flash.geom.Point;
                                       
                                          import mx.rpc.events.FaultEvent;
                                          import mx.rpc.events.ResultEvent;
                                          import mx.collections.ArrayCollection;
                                         /*  import oracle.ondemand.diagrammer.*;
                                          private var templateLine:Link; */
                                          [Bindable]
                                          private var pictureData:ArrayCollection = new ArrayCollection([
                                            {JobName:"A"},{JobName:"B"},{JobName:"C"}, {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

                                     

                                     

                                          public function init():void
                                          {
                                            // a mouseDown event will start the drag   
                                            list.dataProvider = pictureData;
                                                 // accepting a drag/drop operation...
                                            this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                                            // handling the drop...
                                            this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                                           // this.area.addEventListener(Event.ADDED, handleAdded);
                                            //this.area.addEventListener(Event.REMOVED, handleRemoved);
                                          }
                                          public function get isLinking():Boolean {
                                                return false;//this.templateLine.fromNode != null;
                                            }
                                          public function beginDrag( mouseEvent:MouseEvent ):void
                                          {
                                             
                                            var dragInitiator:Text = mouseEvent.currentTarget as Text;
                                            var dragSource:DragSource = new DragSource();
                                           // dsource.addData(this, 'node');
                                            dragSource.addData(this.mouseX, 'mouseX');
                                            dragSource.addData(this.mouseY, 'mouseY');
                                            //parent.addChild(dragImg);
                                            //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                                            try{
                                                var dragProxy:Text=new Text();
                                                dragProxy.text = mouseEvent.currentTarget.text;
                                                   // Alert.show("Text isss"+dragProxy.text);
                                                   dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
                                           
                                                // ask the DragManger to begin the drag
                                                DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
                                            }
                                            catch(e){}   
                                       
                                          }
                                       
                                          public function acceptDrop( dragEvent:DragEvent ):void
                                          {
                                            if (dragEvent.dragSource.hasFormat("items"))
                                            {
                                              DragManager.showFeedback( DragManager.COPY );
                                              DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
                                            }
                                          }
                                       
                                          var pt:Point;
                                          public function handleDrop( dragEvent:DragEvent ):void
                                          {
                                            var dragInitiator:IUIComponent = dragEvent.dragInitiator;
                                            var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                                            var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                                            pt = new Point(dragEvent.localX, dragEvent.localY);
                                            pt = dragEvent.target.localToContent(pt);
                                            var img:Text = new Text();
                                              img.x=dragEvent.localX;   img.y=dragEvent.localY;
                                           // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                                              //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                                            img.width = 50;
                                            img.height=50;
                                            img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
                                            img.text=items[0].JobName.toString();
                                          
                                             img.buttonMode = true;
                                             img.mouseChildren = false;
                                          
                                            img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
                                            img.addEventListener(MouseEvent.CLICK,onSelect);
                                          
                                            pt.x = pt.x+5;
                                            pt.y = pt.y+15;
                                          
                                            img.name = pt.x + "$" + pt.y;
                                          
                                            area.addChild(img);
                                          
                                            /* if(area.getChildren().length>1){
                                                end = pt;
                                                drawLine();
                                                start = end;
                                            }
                                            else{
                                                start = pt;
                                            } */
                                         
                                          }   
                                       
                                          public var xOff:Number;
                                          public var yOff:Number;
                                       
                                             private var bSelected:Boolean = false;  
                                            private var start:Point = new Point(50, 150);
                                            private var end:Point = new Point(350, 150);
                                           private var g:Graphics;
                                          
                                            protected function drawLine() : void
                                            {
                                                g = area.graphics;
                                              
                                                var lt:Number = 5;

                                     

                                     

                                     

                                                g.lineStyle(lt, 0x0119fc,1);
                                                createLine(g, start, end);
                                            }
                                          
                                            public static function createLine(g:Graphics, start:Point, end:Point):void {
                                                g.moveTo(start.x, start.y);
                                                g.lineTo(end.x, end.y);
                                            }

                                     

                                     

                                     

                                     

                                     

                                            private function onClear():void{
                                                        g.clear(); //
                                                       
                                                        area.removeAllChildren();
                                                        bSelected = false
                                                    }
                                          
                                           /*  public static function createLine(g:Graphics, start:Point, end:Point,
                                                                            dashed:Boolean = false, dashLength:Number = 10):void {
                                                g.moveTo(start.x, start.y);
                                                g.lineTo(end.x, end.y);
                                            } */
                                          
                                            private function onSelect(event:Event):void{
                                                var arr:Array;
                                                arr = event.currentTarget.name.split("$");
                                                  
                                                if(!bSelected){
                                                    start.x = arr[0];
                                                    start.y = arr[1];
                                                    bSelected = true;
                                                }
                                                else
                                                {
                                                    end.x = arr[0];
                                                    end.y = arr[1];
                                                    drawLine();
                                                    start = end.clone();
                                                }
                                            }
                                              
                                        ]]>
                                      </mx:Script>

                                     

                                     

                                     


                                      <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
                                        dragEnabled="true" dataProvider="{pictureData}" mouseDown="beginDrag(event)" dragMoveEnabled="true" y="62" x="39"/>
                                        <!--<mx:columns>
                                          <mx:DataGridColumn dataField="id" id="code"/>
                                          <mx:DataGridColumn id="picture" draggable="true" >
                                            <mx:itemRenderer>
                                              <mx:Component>
                                                <mx:Image source="assets/{data.id}.png" mouseDown="outerDocument.beginDrag(event)"/>
                                              </mx:Component>
                                            </mx:itemRenderer>
                                          </mx:DataGridColumn>
                                        </mx:columns>
                                      </mx:DataGrid>-->
                                     
                                      <mx:Canvas id="area" width="700" height="320" alpha="0.5"
                                        backgroundColor="white" dragDrop="handleDrop(event)" x="220" y="62">
                                        <mx:Button x="635" y="10" label="Clear" click="onClear()"/>
                                     
                                     
                                      </mx:Canvas>
                                      <mx:Button x="832" y="435" label="Save"/>
                                    </mx:Application>

                                     

                                     

                                     

                                    Thanks in advance...