4 Replies Latest reply on Apr 20, 2009 1:05 PM by phillipus_rex

    Dynamically Add DataGrid to One Particular State

    phillipus_rex

      I am trying to dynamically create and populate a datagrid on one specific State.  When the user navigates away - changes state - the datagrid should dissappear altogether.

       

      I am currently using this code:

       

                    datagrid1.dataProvider = ac1;
                    this.addChild(datagrid1);
      

       

      This creates a datagrid and populates it - however, whenever I change states, the datagrid is still there, interferring with the visibility of the other states.

       

      I have tried to access the particular State by giving it an id="dataState" like this:

       

                    datagrid1.dataProvider = ac1;
                    this.dataState.addChild(datagrid1);
      

       

      But this did not work.

       

       

      Can anyone suggest a way that I can add a datagrid to a particular state, so that I don't have this problem?

       

      Thanks.

        • 1. Re: Dynamically Add DataGrid to One Particular State
          Gregory Lafrance Level 6

          You define your "base" default state, and then define additional states "based" on the base state.

           

          In MXML you use things like <mx:AddChild>, <mx:RemoveChild>, <mx:SetProperty> to create the states, so this is where you would probably use <mx:RemoveChild target="myDataGrid">.

           

          You can do this is ActionScript, but it is easier in MXML.

           

          See the Flex Builder help system or LiveDocs on states for more info.

          • 2. Re: Dynamically Add DataGrid to One Particular State
            phillipus_rex Level 1

            I used:

             

            <mx:RemoveChild target="datagrid1"/>

             

            I also used this:

             

            <mx:RemoveChild target="this.datagrid1"/>

             

            on a few of the other states - assuming that when I changed states that it would get rid of the datagrid.  However, it did not.

             

            The datagrid still stays in place covering up the rest of the project.

             

             

             

            Also, I have quite a few state changes - so I would have to add this code everytime there is a state change.  So there isn't a way to specify that it only appear on one state?

            • 3. Re: Dynamically Add DataGrid to One Particular State
              Gregory Lafrance Level 6

              If the DataGrid should display when the app first launches, then it should be in the base state. You could possibly create your other states "based on" each other, so you have <mx:RemoveChild> in one state definition, and then based the next state on that state, that way you don't need a lot of <mx:RemoveChild>.

               

              Regarding it not working, please post simplified yet complete code exhibiting the problem, as it is hard to troubleshoot with just snippets.

              • 4. Re: Dynamically Add DataGrid to One Particular State
                phillipus_rex Level 1


                Sure - here is the code that creates the datagrid and populates it (believe it or not, this is actually a simplified version):

                 

                 

                 

                private function resultHandler(event:ResultEvent):void
                          {              
                              //Load result data into XMLList structure
                              var xmlData:XML = XML(myService.GetViewResults.lastResult);
                              
                              //gets the DataTables data, length of tableXML is the number of Tables you got
                              var tableXML:XMLList = xmlData.GetViewResultsResult.DataTables.children();
                                            
                              //gets the number of tables returned in the result
                              var numTables:int = tableXML.children().length();
                              
                              //seperates out the data for each table
                              var tempXMLArray:Array = new Array();
                              var tempXML:XML;
                              for (var i:int=0; i<numTables; i++)
                              {
                                  tempXML = tableXML[i];
                                  tempXMLArray.push(tempXML);
                              }
                              
                              //create a datagrid for each table, could be done more dynamically..
                              var datagrid1:DataGrid;
                              
                              //create array collections to feed datagrids
                              var ac1:ArrayCollection;
                              
                              var currentTableXML:XML;
                              var columns:Array = new Array();
                              var dgc:DataGridColumn;
                              var obj:Object;
                              
                              //CREATING TABLE 1
                              currentTableXML = tempXMLArray[0];
                              
                              datagrid1 = new DataGrid();
                              datagrid1.width = 1000;
                              datagrid1.height = 200;
                              datagrid1.y = 0;
                              
                              columns = new Array();
                              for (i=0; i<currentTableXML.Columns.children().length(); i++)
                              {
                                  dgc = new DataGridColumn(currentTableXML.Columns.NHRCViewResultColumn.ColumnName[i].toString());
                                  dgc.dataField = currentTableXML.Columns.NHRCViewResultColumn.ColumnName[i];
                                  columns.push(dgc);
                              }
                          
                              datagrid1.columns = columns;
                              
                              ac1 = new ArrayCollection;
                              for (i=0; i<currentTableXML.Rows.children().length(); i++)
                              {
                                  trace("table 1:creating row " + i);
                                  obj = {
                                      ((datagrid1.columns[0] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[0]),
                                      ((datagrid1.columns[1] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[1]),
                                      ((datagrid1.columns[2] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[2]),
                                      ((datagrid1.columns[3] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[3]),
                                      ((datagrid1.columns[4] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[4]),
                                      ((datagrid1.columns[5] as DataGridColumn).dataField.toString()):(currentTableXML.Rows.NHRCViewResultRow.Values[i].string[5])
                                  };
                                  
                                  ac1.addItem(obj);
                              }
                              
                              datagrid1.dataProvider = ac1;
                              this.addChild(datagrid1);

                 

                 

                 

                 

                 

                 

                Here is the code used to remove this datagrid on a particular State:

                 

                 

                <mx:State name="OtherState">
                            <mx:RemoveChild target="{datagrid1}"/>
                </mx:State>
                

                 

                 

                 

                Let me know if there is anything else I can add.  Thanks.