11 Replies Latest reply on Nov 15, 2013 6:56 AM by Mahag

    Building DataGrid dynamically

    olegkon Level 1



      I am getting data from the database via XML (SOAP Web Service),

      and in that case I don't know number of columns or their names.

      Need to display them in Spark DataGrid (and allow user to add, edit, delete rows).


      The complication I see here is that in that project there is Parsley + proprietary corporate

      Flex/Java soap framework, so I normally know a Value Object and get a Vector of rows, converting it into a ResultSet to process.


      in Parsley Command:

      public function result(event:ResultEvent) {

        var rs:Vector.<Object> = ServiceUtils.extractResultSet(event.result, ValueObject);




      But in that case there is no static Value Object.


      Is there a way to create dynamic Value Objects?



      Can you tell me how can I retrieve Columns (metadata) from XML (length and Column Names) ?



      Please help!







      Thank you,
        • 2. Re: Building DataGrid dynamically
          olegkon Level 1

          That's nice.


          In my case data comes not from XML, but as an Object (ResultSet as Vector->Array->ArrayCollection),

          and list of Columns as Vector->Array,

          and it seems to work.

          The only problem I got is that data columns are sorted in Alphabetical order,

          so it looks pretty ugly to the user.

          Any way to fix that order of columns (in order as it came, not alphabetically?)



          Thank you,


          • 3. Re: Building DataGrid dynamically
            jfb00 Level 3

            Are you sorting somewhere? It should come the way you want it.

            You can sort the arrayCollection with:



            • 4. Re: Building DataGrid dynamically
              olegkon Level 1

              No, I am not doing any sort.
              It seems that by default for if you have dynamic data, without defined columns, Spark DataGrid

              is sorting columns alphabetically by default.


              Any way to prevent/fix it?

              • 5. Re: Building DataGrid dynamically
                jfb00 Level 3

                Very interesting, the same behavior happens in advanced Datagrid.

                Here is my solution:


                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                            import mx.collections.ArrayCollection;
                            import spark.components.gridClasses.GridColumn;
                            private var dpFlat:ArrayCollection = new ArrayCollection([
                                {Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                                {Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                                {Territory:"Central California", Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                                {Territory:"Nevada", Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                                {Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                                {Territory:"Northern California", Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                                {Territory:"Southern California", Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                                {Territory:"Southern California", Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
                            public var myArray:Array = ["Territory", "Territory_Rep", "Actual", "Estimate"];
                            private var gridColumns:ArrayCollection = new ArrayCollection();
                            private function init():void{
                                for each (var field:String in myArray)
                                    var myColumn:GridColumn = new GridColumn(field);
                                myADG.columns = gridColumns;
                    <s:DataGrid id="myADG" editable="false" width="100%" height="100%" dataProvider="{dpFlat}">
                • 6. Re: Building DataGrid dynamically
                  olegkon Level 1

                  Very good.


                  I have 2 more problems with that Dynamic table.

                  1) I need to implement "Clear" on that table.

                  No matter what I tried:



                  arrayColl = new ArrayCollection();


                  myDG.dataProvider=new ArrayCollection();

                  I am getting NULL reference exception coming from some system code:    if (cell.visible)...   where cell=null.

                  How can I clear that dynamic DG ?


                  2) I need to show 2 DGs on the screen, and the second of them is Dynamic,

                  and allow user to resize them vertically to be able to see more in static or dynamic DG.

                  I put them in VDividedBox (and set height of both DG and container to 100%).

                  It split the screen vertically 50:50, but still there is no draggable in between,

                  so can't resize.


                  Any help is very appreciated.




                  • 7. Re: Building DataGrid dynamically
                    Flex harUI Adobe Employee

                    What is the full stack trace for the error?

                    • 8. Re: Building DataGrid dynamically
                      olegkon Level 1

                      Here it is:

                      TypeError: Error #1009: Cannot access a property or method of a null object reference.
                      at spark.components.gridClasses::GridLayout/updateTypicalCellSizes()
                      at spark.components.gridClasses::GridLayout/measure()
                      at spark.components.supportClasses::GroupBase/measure()
                      at mx.core::UIComponent/measureSizes()
                      at mx.core::UIComponent/validateSize()
                      at spark.components::Group/validateSize()
                      at mx.managers::LayoutManager/validateSize()
                      at mx.managers::LayoutManager/doPhasedInstantiation()
                      at mx.managers::LayoutManager/doPhasedInstantiationCallback()



                      Also is there a way to disable DataGrid from alphabetically sorting Spark DataGrid columns

                      if you have dynamic (unknown) arrayCollection in dataProvider?





                      • 9. Re: Building DataGrid dynamically
                        olegkon Level 1

                        Full exception trace with numbers:

                        TypeError: Error #1009: Cannot access a property or method of a null object reference.

                                  at spark.components.gridClasses::GridLayout/updateTypicalCellSizes()[E:\dev\4.5.1\frameworks \projects\spark\src\spark\components\gridClasses\GridLayout.as:867]

                                  at spark.components.gridClasses::GridLayout/measure()[E:\dev\4.5.1\frameworks\projects\spark \src\spark\components\gridClasses\GridLayout.as:444]

                                  at spark.components.supportClasses::GroupBase/measure()[E:\dev\4.5.1\frameworks\projects\spa rk\src\spark\components\supportClasses\GroupBase.as:1148]

                                  at mx.core::UIComponent/measureSizes()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\cor e\UIComponent.as:8496]

                                  at mx.core::UIComponent/validateSize()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\cor e\UIComponent.as:8420]

                                  at spark.components::Group/validateSize()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\c omponents\Group.as:1012]

                                  at mx.managers::LayoutManager/validateSize()[E:\dev\4.5.1\frameworks\projects\framework\src\ mx\managers\LayoutManager.as:665]

                                  at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.5.1\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:816]

                                  at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.5.1\frameworks\projec ts\framework\src\mx\managers\LayoutManager.as:1180]

                        • 10. Re: Building DataGrid dynamically
                          olegkon Level 1

                          It fixed that exception:   arrCol.source=new Array( { "" : ""} );


                          Any suggestions how to resolve items 2 & 3 (show columns in original order

                          and implement VDividerBox when second datagrid populated dynamically) ?

                          • 11. Re: Building DataGrid dynamically

                            This is wonderful

                            1. BUT I have other AdvanceDGs in the same form and application! so how to make the above creationComplete="init()" to be applied to "a" specific ADG? Right now I am seeing compilation errors on all the other ADGs in my IDE.
                            2. And this requirement comes from a need to have "a" Data Entry form automagically  generated using the above  Array column names, ANY Such sample code tying the ADG Column Names to generate a form items in a form will help. Basically I am trying to create a metadata for a Table and a Date Entry form for pulating that table!!
                            3. How can I modularize  the above specific code in separate MXML file for the ADG (say dynamicADGColumnProvider.xml) and reference the ADG MXML back in the main Application mxml? basically creating a hierarchy of mxmls for each of the ADGs separately

                            Thanks for your reply.