8 Replies Latest reply on Aug 26, 2009 1:19 AM by Umal Kumar

    How to populate a popup based on the selected data in a datagrid

    Arunkumar S Level 1

      Hi,

       

      I have populated a datagrid by loading the data from a XML file. What i'm trying to do is, whenever the user clicks on a paricular data in the datagrid, i want to open a popup based on the element (data) he clicked. I have tried the itemclick event. But i'm not able to do this for a particular event. This works only for the entire row of the datagrid.

       

      Can someone help me to trace the particular in a datagrid and to open the popup based on it..

        • 1. Re: How to populate a popup based on the selected data in a datagrid
          babo_ya Level 3

          You could create a custom itemRenderer..

           

          And just add "MouseEvent.CLICK" event and show pop up using the mx.manager.PopUpManager.

           

          hope this helps,

           

          BaBo,

          • 2. Re: How to populate a popup based on the selected data in a datagrid
            Arunkumar S Level 1

            Hi Babo,

             

            Thanks for your answer. But i'm very new to flex. So it would be great if you could please explain me in detail or even a sample code will also be helpful for me.

            • 3. Re: How to populate a popup based on the selected data in a datagrid
              ShardulSingh Level 3

              Hi Arun,

               

              I am giving you the code of three class the first one is Main application, in which the datagrid is used. The second class is the itemRenderer of the Datagrid.And the third class is the Popup which will be shown when you will click on the any names in the Datagrid.Please keep the names of classes same as here they are.I hope it will fullfill your requirement.

              Still if you will have any issue pls feel free to ask.

               

               

              MainApplication.

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

              layout="vertical">

              <mx:Script>

              <![CDATA[

              import mx.collections.ArrayCollection;

              import mx.events.ListEvent;

              [Bindable]

              private var dgArrayCollection:ArrayCollection=

              new ArrayCollection([

              {seq:'1', names:'John'},

              {seq:'2', names:'Alex'},

              {seq:'3', names:'Peter'},

              {seq:'4', names:'Sam'},

              {seq:'5', names:'Alis'},

              {seq:'6', names:'Robin'},

              {seq:'7', names:'Mark'},

              {seq:'8', names:'Steave'},

              {seq:'9', names:'Fill'},

              {seq:'10', names:'Abraham'},

              {seq:'11', names:'Hennery'},

              {seq:'12', names:'Luis'},

              {seq:'13', names:'Herry'},

              {seq:'14', names:'Markus'},

              {seq:'15', names:'Flip'}

              ]);

              ]]>

              </mx:Script>

              <mx:VBox width="300" height="100%"

              horizontalAlign="center"

              verticalAlign="middle">

              <mx:DataGrid id="dg" width="50%"

              height="100%"

              borderStyle="none"

              itemRenderer="DataGridItemRenderer"

              dataProvider="{dgArrayCollection}"

              >

               

              <mx:columns>

              <mx:DataGridColumn dataField="names" headerText="Names"/>

              </mx:columns>

               

              </mx:DataGrid>

               

              </mx:VBox>

               

              </mx:Application

               

               

               

               

               

               

               

              DataGridItemRenderer.mxml

              <?xml version="1.0" encoding="utf-8"?>

              <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"

              width="110" height="30" horizontalGap="5"

              >

              <mx:Script>

              <![CDATA[

                    import mx.core.Application;

                    import mx.managers.PopUpManager;

              override public function set data(value:Object):void

              {

              super.data = value;

              }

               

              private function onClick():void

              {

              var myPopUp:MyPopup= MyPopup(PopUpManager.createPopUp(this, MyPopup, true));

              myPopUp.move(((Application.application.width/2)-(myPopUp.width/2)),

              ((Application.application.height/2)-(myPopUp.height/2)));

              myPopUp.txtFromOutSide = txt.text;

              }

              ]]>

              </mx:Script>

              <mx:Label width="25" height="30" text="{data.seq}"/>

              <mx:TextInput id="txt" width="75" height="30" text="{data.names}" click="onClick()"/>

              </mx:HBox

               

               

               

               

               

               

               

               

              MyPopup.mxml

              <?xml version="1.0" encoding="utf-8"?>

              <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"

                    width="200" height="150" borderStyle="solid"

                    borderColor="0xCCCCCC"

                    cornerRadius="5">

              <mx:Script>

                    <![CDATA[

                    import mx.managers.PopUpManager;

                   

                    [Bindable]

                    public var txtFromOutSide: String;

                   

                    private function onClose():void

                    {

                          PopUpManager.removePopUp(this);

                    }

                    ]]>

              </mx:Script>

              <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">

              <mx:Label id="lbl" text="{txtFromOutSide}" textAlign="center"/>

              <mx:Button label="OK" click="onClose()"/>

              </mx:VBox>

                   

              </mx:TitleWindow>

               

               

               

               

              simply  copy and paste these classes.

               

              with Regards,

               

              Shardul Singh Bartwal

               

               

               

               

               

               

               

               

              1 person found this helpful
              • 4. Re: How to populate a popup based on the selected data in a datagrid
                Arunkumar S Level 1

                Hi Shardul,

                 

                Thanks for your reply. But we are loading the datagrid values from the xml and the popup will also loads from xml for that corresponding cell. Actually what i understand from your way of selecting the data is you are having an external label or textbox inside a datagrid. But because of doing like this, the datagrid loses its default properties and i don't want to happen.

                 

                My requirement is something like a link inside a datagrid and when the link is clicked, the popup opens with the datas from the xml for that particular cell.

                 

                Attached is my .asp document (xml is generated in this file) and mxml file.

                • 5. Re: How to populate a popup based on the selected data in a datagrid
                  ShardulSingh Level 3

                  Hi,

                  Simply Create a xmlListCollection from the xml which you r getting from asp at flex end,and provide that in the dataprovider of the Datagrid.In the ItemRender use that field which you want like data.youFiledName, rest is prety similar.

                   

                   

                   

                  Shardul Singh Bartwal

                  • 6. Re: How to populate a popup based on the selected data in a datagrid
                    starbabu

                    Hi Shardhul,

                    I'm very new to flex and i also supposed to do this functionality. I tried doing this but i'm facing lots of issues. It would be great if you could share me the code to populate the popup based on the selection of the datagrid.

                     

                    Even i tried to use Advanced Datagrid to select an individual cell but i couldn't able to retrieve the corresponding values for that particular cell. Plz help me to resolve this. Thanks.

                    • 7. Re: How to populate a popup based on the selected data in a datagrid
                      Si Phu

                      Hi starbabu,

                       

                      I borrowed the source code of ShardulSingh with some adjustment to show you how to get the specified cell value of a selected row (This is just another way to deal with this problem). Just tell me if this code does not meet your problem.

                       

                      First,i have the main form called MainForm.mxml

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
                          <mx:Script>
                              <![CDATA[
                                  import flash.events.Event;
                                  import mx.controls.DataGrid;
                                  import mx.events.ListEvent;
                                  import mx.collections.ArrayCollection;
                                  import mx.containers.TitleWindow;
                                  import mx.events.DataGridEvent;
                                  import mx.managers.PopUpManager;
                                  import PopupForm;

                       

                                  [Bindable]
                                  private var dgArrayCollection:ArrayCollection =
                                      new ArrayCollection([
                                          {id:'1', name:'John'},
                                          {id:'2', name:'Alex'},
                                          {id:'3', name:'Peter'},
                                          {id:'4', name:'Sam'},
                                          {id:'5', name:'Alis'},
                                          {id:'6', name:'Robin'},
                                          {id:'7', name:'Mark'},
                                          {id:'8', name:'Steave'},
                                          {id:'9', name:'Fill'},
                                          {id:'10', name:'Abraham'},
                                          {id:'11', name:'Hennery'},
                                          {id:'12', name:'Luis'},
                                          {id:'13', name:'Herry'},
                                          {id:'14', name:'Markus'},
                                          {id:'15', name:'Flip'}
                                      ]);

                       

                                  private var newPopUp:PopupForm;

                       

                                  private function showPopUp(event:ListEvent):void {
                                      var newPopUp:PopupForm = PopupForm(PopUpManager.createPopUp(this, PopupForm, true));
                                     
                                      // Get the target of this event (Datagrid)
                                      var dataGrid:DataGrid = event.target as DataGrid;
                                      // Get selected column index
                                      var dsColumnIndex:Number = event.columnIndex;
                                      // based on the selected column index
                                      // get the DataGridColumn object to get the selected column name
                                      var col:DataGridColumn = dataGrid.columns[dsColumnIndex];
                                      // Get selected cell value
                                      var newValue:String = dataGrid.selectedItem[col.dataField];

                       

                                      newPopUp.txtFromOutSide = newValue;
                                     
                                      PopUpManager.centerPopUp(newPopUp);
                                  }
                              ]]>
                          </mx:Script>
                          <mx:VBox width="300" height="100%" horizontalAlign="center" verticalAlign="middle">
                              <mx:DataGrid id="dg" width="50%" height="100%" borderStyle="none"
                                  dataProvider="{dgArrayCollection}" doubleClickEnabled="true" itemDoubleClick="showPopUp(event)" >
                                  <mx:columns>
                                      <mx:DataGridColumn dataField="id" headerText="ID"/>
                                      <mx:DataGridColumn dataField="name" headerText="Name"/>
                                  </mx:columns>
                              </mx:DataGrid>
                          </mx:VBox>
                      </mx:Application>

                       

                      And the popup where the selected value'll be displayed, i called it [PopupForm.mxml] (All these files are put at the same directory)

                       

                      <?xml version="1.0" encoding="utf-8"?>

                       

                      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                          width="200" height="150" borderStyle="solid"
                          borderColor="0xCCCCCC" cornerRadius="5">

                       

                      <mx:Script>
                           <![CDATA[
                            import mx.managers.PopUpManager;
                           
                            [Bindable]
                            public var txtFromOutSide: String;

                       

                            private function onClose():void {
                              PopUpManager.removePopUp(this);
                            }

                       

                            ]]>

                       

                      </mx:Script>

                       

                      <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">
                          <mx:Label id="lbl" text="{txtFromOutSide}" textAlign="center"/>
                          <mx:Button label="OK" click="onClose()"/>
                      </mx:VBox>
                      </mx:TitleWindow>

                       

                      Hope this help!

                      • 8. Re: How to populate a popup based on the selected data in a datagrid
                        Umal Kumar Adobe Employee

                        HI,

                         

                        I checked the example created by Shradul and that is the way to select the dataGrid particular column value. In case if you dont want to edit the names just remove the textInput control from the itemRenderer and let only Label be present there. In the label the text field will be {data.names}.

                         

                        It really doesnt matters how the data is coming to the datagrid. As you set the dataprovider of the dataGrid, DataGrid automatically takes care of it and displays it. Now the question of yours is how can i click a particular column elements and not all the elements. So the solution provided resolves that issue of yours.I am attaching the rewqorked sample code from Shradul.

                         

                        Please let me know if this helps.

                         

                        Thanks