4 Replies Latest reply on Apr 15, 2011 6:05 AM by jfb00

    Datagrid with dynamic columns

    jfb00 Level 3

      Hi All,

      I have a query with static data and dynamic data, the dynamic data are years so i could have a range of 3 years result columns or 5 years.

      Its a way to create dynamic columns for the datagrid?

      I see that I can use visible property to hide and show the column, how can I do a loop in mxml code base on my condition and create dynamic columns?

      Any ideas, links anybody wants to share...




        • 1. Re: Datagrid with dynamic columns
          Flex harUI Adobe Employee

          You build up an array of DataGridColumns then assign that to the columns

          property.  You must assign a complete array, you cannot modify the array

          after assignment.

          • 2. Re: Datagrid with dynamic columns
            jfb00 Level 3

            Go it Alex,

            Now, my form is part of my menu. If I reselect the form it will create a double set of columns.

            In my menu when i select an item i call the private init() function from my form.

            In my form I have creationPolicy="all".

            It is a way to initialize the data grid. I try myGrid.initialize(); but it's no doing anything.

            Any ideas?




            • 3. Re: Datagrid with dynamic columns
              Flex harUI Adobe Employee

              There's probably a bug in the way you are building up the columns array.


              Using creationPolicy="all" is never recommended as it can cause startup

              performance issues.  Components should pull information they need from a

              shared data model.  It should not get pushed to the component.

              • 4. Re: Datagrid with dynamic columns
                jfb00 Level 3

                Hi Alex,

                This is my init function:

                private function init():void {
                                myDataGrid.dataProvider = acSample; 
                                myDataGrid.columns = getColumnDef(acSample);

                I assigned the arrayCollection to the datagrid, after that I run the function that will return the array of the columns.

                If I call again the form it will add the columns again.

                My first line of code is not overwriting the dataprovider of the datagrid?

                Small example:


                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                verticalAlign="middle" creationComplete="init()"
                                backgroundColor="white" >
                            import mx.controls.dataGridClasses.DataGridColumn;
                            import mx.controls.DataGrid;
                            import mx.collections.ArrayCollection;
                            [Bindable] private var acSample:ArrayCollection = new ArrayCollection([
                                {Fname: "Kranthi", Lname:"Kata", dob:"21/10/1972", Amount:10000, Rate:0, Year01:23, Year02:43 },
                                {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount:5000,  Rate:0, Year01:23, Year02:43},
                                {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount:5000,  Rate:0, Year01:23, Year02:43},
                                {Fname: "Sample1", Lname:"Lola", dob:"12/01/1982", Amount:10000, Rate:0, Year01:23, Year02:43},
                                {Fname: "Basanth", Lname:"Viola",dob:"5/01/1980",  Amount:5000,  Rate:0, Year01:23, Year02:43},
                                {Fname: "Basanth", Lname:"Chuck",dob:"5/01/1980",  Amount:5000,  Rate:0, Year01:23, Year02:43},
                                {Fname: "Sample2", Lname:"Viola",dob:"2/06/1985",  Amount:10000, Rate:0, Year01:23, Year02:43},
                                {Fname: "Manoj",   Lname:"Pat",  dob:"16/09/1978", Amount:5000,  Rate:0, Year01:23, Year02:43},
                                {Fname: "John M",  Lname:"Mela", dob:"15/01/1974", Amount:10000, Rate:0, Year01:23, Year02:43},
                            private function init():void {
                                myDataGrid.dataProvider = acSample;
                                myDataGrid.columns = getColumnDef(acSample);
                            private function getColumnDef(ac:ArrayCollection):Array
                                var arrColDef:Array = new Array();
                                var arrColumns:Array = new Array();
                                arrColumns = myDataGrid.columns;
                                var objColDef:Object = new Object();
                                var acRow:Object = new Object; 
                                acRow = ac.getItemAt(0);
                                var dataGridColumn:DataGridColumn;
                                // determine year columns and sort so they are displayed in the correct order
                                // not guaranteed to come back in the correct order from the server
                                for(var key:String in acRow){
                                    if(key.indexOf("Year") > -1){
                                for(var i:int=0; i< arrColDef.length; i++){
                                    dataGridColumn = new DataGridColumn(arrColDef[i]);
                                    dataGridColumn.headerText = arrColDef[i].substr(4,arrColDef[i].length-1);
                                return arrColumns;
                    <mx:ApplicationControlBar dock="true">
                        <mx:Button label="Add column" click="init();" />
                        <mx:Button label="Reset" click="myDataGrid.initialized;" />
                    <mx:DataGrid id="myDataGrid" >
                            <mx:DataGridColumn dataField="Fname" />
                            <mx:DataGridColumn dataField="Lname" />
                            <mx:DataGridColumn dataField="dob" />