Dynamically adding new columns to a DataGrid control in Flex

By Peter deHaan On March 4, 2008 · 46 Comments

The following example shows how you can dynamically add new columns to a Flex DataGrid control by setting the columns property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/04/dynamically-adding-new-columns-to-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function addDataGridColumn(dataField:String):void {
                var dgc:DataGridColumn = new DataGridColumn(dataField);
                var cols:Array = dataGrid.columns;
                cols.push(dgc);
                dataGrid.columns = cols;
            }

            private function init():void {
                addDataGridColumn("col4");
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/>
                <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/>
                <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/>
                <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/>
                <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/>
                <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add column" click="init();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="400"
            rowCount="6">
        <mx:columns>
            <mx:DataGridColumn dataField="col1" />
            <mx:DataGridColumn dataField="col2" />
            <mx:DataGridColumn dataField="col3" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Tagged with: columns

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

46 Responses to Dynamically adding new columns to a DataGrid control in Flex

Mohammad Ismail says:

March 6, 2008 at 11:52 pm

hi..
could u please tell me the best and easiest way of writing itemrenderers for a Flex application.becoz i am beginner of this technology i hav been using flex 2.0.1 for the last one year…i feel sometimes difficult to code them.

Reply
Craig says:

March 19, 2008 at 8:23 am

thanks man. exactly what I was looking for.

Reply
lesieux says:

March 31, 2008 at 2:45 pm

i need your help because i would like to make a dynamic datagrid, the number of column would depend on what is sent by the httpservice (after a request by sql), and can be sent first but though i tried to make it by creating a datagrid by actionscript, it doesn’t work, i don’t succeed to make the datagrid take it into account before being populated. Excuse my english cause i’m french, i hope you have understood my problem and that you can help me. Thank you.

Reply

peterd says:

March 31, 2008 at 3:29 pm

lesieux,

Does this help?

<?xml version="1.0" encoding="utf-8"?>
<!-- main.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;

            private var dp:XMLListCollection;

            private var dataGrid:DataGrid;

            private function httpService_fault(evt:FaultEvent):void {
                Alert.show(evt.fault.faultString);
            }

            private function httpService_result(evt:ResultEvent):void {
                var res:XML = evt.result as XML;
                dp = new XMLListCollection(res.node);

                dataGrid = new DataGrid();
                dataGrid.rowCount = 5;
                dataGrid.dataProvider = dp;
                addChild(dataGrid);
            }

            private function init():void {
                httpService.send();
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="httpService"
            url="data2.xml"
            resultFormat="e4x"
            fault="httpService_fault(event);"
            result="httpService_result(event);" />

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- data.xml -->
<root>
    <node c1="ONe.1" c2="TWo.1" c3="THREe.1" c4="FOUr.1" />
    <node c1="ONe.2" c2="TWo.2" c3="THREe.2" c4="FOUr.2" />
    <node c1="ONe.3" c2="TWo.3" c3="THREe.3" c4="FOUr.3" />
    <node c1="ONe.4" c2="TWo.4" c3="THREe.4" c4="FOUr.4" />
    <node c1="ONe.5" c2="TWo.5" c3="THREe.5" c4="FOUr.5" />
    <node c1="ONe.6" c2="TWo.6" c3="THREe.6" c4="FOUr.6" />
</root>

Also, I should add, if you want to specify a column order, you can set the columns property Array, as shown in the following snippet:

var c1:DataGridColumn = new DataGridColumn("@c1");
var c2:DataGridColumn = new DataGridColumn("@c2");
var c3:DataGridColumn = new DataGridColumn("@c3");

dataGrid = new DataGrid();
dataGrid.columns = [c3, c1, c2];
dataGrid.rowCount = 5;
dataGrid.dataProvider = dp;
addChild(dataGrid);

Peter

vincent lesieux says:

April 1, 2008 at 5:02 am

Thank you for your quick answer, it’s very nice and professional, i’m going to study your code and will give you a response as soon as i can.

Reply
lesieux says:

April 1, 2008 at 2:34 pm

In order to use your code, I have made a php file to transform the result of a sql request in xml. Now, I don’t know how i can manage in flex to call the php to receive the data. Have you got an idea? Thank you.

Reply
peterd says:

April 1, 2008 at 5:10 pm

lesieux,

Can you use the <mx:HTTPService /> tag to call the PHP?

Peter

Reply
Joe says:

April 8, 2008 at 7:49 am

Hey I am trying to embed a ProgressBar into data grid and I receive an error your article did the combo boxes (and it worked)
what is up with ProgressBar??

Reply
Greg says:

April 21, 2008 at 11:55 pm

Awesome, definitely works. Two questions.

1st. can I dynamically label these using .columnCount?

2nd. can I make the new columns invisible on creation?

Appreciate any help.

-G

Reply

peterd says:

April 22, 2008 at 12:06 am

Greg,

Does this work for you?

private function addDataGridColumn(dataField:String):void {
    var dgc:DataGridColumn = new DataGridColumn(dataField);
    dgc.visible = false;
    dgc.headerText = "col " + (dataGrid.columns.length + 1);
    var cols:Array = dataGrid.columns;
    cols.push(dgc);
    dataGrid.columns = cols;
}

Peter

Greg says:

April 22, 2008 at 1:16 am

Peter, you rock!
Modified it a bit, needed it to set the datafield, not the headertext.

Here’s my code:

private function addDataGridColumn(dataField:String):void {
    var dgc:DataGridColumn = new DataGridColumn(dataField);
    dgc.visible = false;
    var cols:Array = peopleMainDB.columns;
    cols.push(dgc);
    peopleMainDB.columns = cols;
    trace("Number of columns:" + peopleMainDB.columns.length)
}

private function init():void {
    var x:String = "icon " + (peopleMainDB.columns.length + 1);
    addDataGridColumn(x);
}

Thanks again, wish I had you around for all of my flex problems.

PJW says:

June 16, 2008 at 12:59 pm

Hi,
Several weeks ago I was wrestling with DataGrid renderers.

The above posts helped… as well as other sources I googled up. Without going into the specifics of my own solution (needed to be entirely ActionScript, i.e. no MXML) here are some posts I found useful (hopefully this blog doesn’t treat this like a spam post). Hopefully these help out others who face similar challenges.

http://philflash.inway.fr/flex/dgRendererSimple/dgRendererSimple.html

…a couple more (WordPress doesn’t like too many URLs in posts):
http://philflash.inway.fr/flex/dgRendererSimple/srcview/index.html
http://www.mail-archive.com/flexcoders@yahoogroups.com/msg85212.html
http://www.adobe.com/devnet/flash/articles/detecting_datagrid_edits.html

Yet some more:
http://blog.flexexamples.com/2008/03/04/dynamically-adding-new-columns-to-a-datagrid-control-in-flex/
http://www.actionscript.org/forums/showthread.php3?t=163781
http://www.returnundefined.com/2006/10/item-renderers-in-datagrids-a-primer-for-predictable-behavior

…and the last (Moderator: you might want to combine these posts, if you think your readers will find useful. Thanks.)
http://bugs.adobe.com/jira/browse/FLEXDOCS-142
http://blog.flexmonkeypatches.com/tag/itemrenderer/
http://www.nabble.com/item-renderers-in-a-datagrid-with-dynamically-created-columns-td16567760.html
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html

http://blogs.adobe.com/aharui/MultilineHTML.zip

Reply
GT says:

August 29, 2008 at 5:50 am

Both the tutorial in toto, and the comment that helped Vincent Lesieux, were tremendously useful to me. I had decided that I would like to be able to change the entire contents of a DataGrid (from price-related data to valuation-related data) on the client side as a selection, as part of a Watchlist/Portfolio manager app. The number of columns would change as a result.

Thanks to this tute and others on this site, I can now offer a customised list of columns, fetch the data from mySQL, and populate the new colums… or replace the entire DataGrid in one fell swoop using pre-defined sets of columns.

I’ve been meaning for a month to write a thank-you for this, and for other insightful entries here: my only excuse for not having done so until now is that I have been absolutely drowning in tasks that had to be done in order to finish the apps.

Thanks muchly,

GT

Reply
Kirk says:

September 30, 2008 at 10:55 pm

I am using this example with a checkbox instead of a button.

How does the code change to delete the column when unchecked, instead of adding a duplicate column?

Reply

peterd says:

October 1, 2008 at 12:18 am

Kirk,

I’d probably just try and toggle the visible property on the DataGridColumn. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/>
                <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/>
                <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/>
                <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/>
                <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/>
                <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox1" label="Toggle col1" selected="true" />
        <mx:CheckBox id="checkBox2" label="Toggle col2" selected="true" />
        <mx:CheckBox id="checkBox3" label="Toggle col3" selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="400"
            rowCount="5">
        <mx:columns>
            <mx:DataGridColumn dataField="col1"
                    visible="{checkBox1.selected}" />
            <mx:DataGridColumn dataField="col2"
                    visible="{checkBox2.selected}" />
            <mx:DataGridColumn dataField="col3"
                    visible="{checkBox3.selected}" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Peter

Kirk says:

October 1, 2008 at 10:57 pm

Thank you for the quick response. That is a much more elegant solution.

Reply
billp says:

November 4, 2008 at 3:40 pm

The code for the checkbox works well but when I use send a new request out using httpservice call to PHP all the columns appear again….Even if none are selected on the checkboxes…Is there something I am missing?

Reply
billp says:

November 4, 2008 at 4:14 pm

Might have answered my own question…I am sure you have a better solution bur I found this and it worked for me…

http://blog.classsoftware.com/index.cfm/2007/6/17/Flex-Datagrid-Visibility-Bug

Reply
aap says:

January 21, 2009 at 9:06 am

Hi,
I have a datagrid which is bound to an arrayCollection, where datagrid has 4 columns out of which i am bounding three fields.When the user clicks the row , i have to populate the row’s first column with an image control.but the image control that i am adding id added to the panel not to the datagrid

Reply
Ruchika says:

February 6, 2009 at 11:24 pm

Thanks a lot. example in this link are quite helpful.

Reply
Dan Zeitman says:

February 11, 2009 at 10:25 am

Hi,

Thanks for the great examples.

Is there a way to modifying the array collection to have an additional colection item element (column)

I’m trying to work out a simple problem – which is to have a grid (editable) I want to track changes made to the grid by a user while editing

My thought was to a item element to represent the state (new, dirty, delete …)
Then I’d have a submit method which would loop through the changes, post each record to the server (my server side code handles a single record vo not a collection)

Common interaction problem, some users prefer entering data in grid, vs a single form.

Any Thoughts would be appreciated,
Dan

Reply

yuy0 says:

February 13, 2009 at 12:50 am

hye..

i got this code with me:

	var stringToSplit:String = "127.0.0.1 - - [15/Sep/2008:10:37:14 -0700] GET /bppklms/index.php?cal_m=2&amp;cal_y=1995 HTTP/1.1 200 14400 - Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
			stringToSplit += "127.0.0.1 - - [16/Sep/2008:10:37:14 -0700]";
			var re:RegExp = /(?P<a>[^2]+?)(s)(?P<b>[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P<i>[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)(s)(?P[^2]+?)2/g;
			var result:Array;
			do
			{
				result = re.exec(stringToSplit);
				if (result)
				{
					trace(result.a);
					trace(result.b);
					trace(result.c);
					trace(result.d);
					trace(result.e);
					trace(result.f);
					trace(result.g);
					trace(result.h);
					trace(result.i);
					trace(result.j);
					trace(result.k);
					trace(result.l);
					trace(result.m);
					trace(result.n);
					sourceArray.push({ a: result.a, b: result.b, c: result.c, d: result.d, e: result.e, f: result.f, g: result.g, h: result.h, i: result.i, j: result.j, k: result.k, l: result.l, m: result.m, n: result.n});
				}
 
			}
			while (result);
			dp.refresh();
		}
		]]>

how could i make some of the columns invisible??for example i want to make column b and c invisible.can it be done??

Jonathan says:

March 26, 2009 at 7:13 am

Hey, I have been looking at the example that you provided for adding dynamic columns to a datagrid that is coming back off an httpService.

I have a similar issue that I was hoping someone can help with. I currently am getting xml from php (which works fine) but the xml returned is multidimensional and I need to dynamically create a datagrid to handle the xml returned. The structure being returned is as follows:

<section>
<user> (can be mulitple users)
<firstname>
<lastname>
<document> (will be mutiple)
<submissiondate>
</document>
</user>
</section>

I am trying to get the data returned into a datagrid to display the section,firstname,lastname,and document as the column headers.

Thanks!

Reply
Bhuvan says:

March 30, 2009 at 9:07 am

Hello ,

Could you tell me.. that getting a label from datagrid..

i’m breifly explain…

i had a two datagrid

first one is draging the image and put into datagrid by [img.name) to imgholder arraycollection

second one i have a check a arraycollection of same field of names in array..

first one has randomly pick the image and send it the datagrid.. like [one,three,two..)

i want to compare the data from the arraycollection to imgholder …..

if rowcol value of label is equal to the imgholder… if its same mean the list the label is equal…. else its unequal array…..

here, i can’t make to compare the two datagrid….
could give a code or explain to get….

my code…

Thanks & Regrads
BHUVAN

Reply

Anonymous says:

October 5, 2009 at 10:43 am

Hi,

I am novice in programation and flexo solutions, so I want to hide and unhide a column depending on some dynamic variable.

for example if the user select a check, it automatically show one specific column and if the user uncheck, that column is hide.

thanks
GAP

Peter deHaan says:

October 5, 2009 at 11:11 am

@Anonymous,

You can set the visible property on each DataGridColumn object, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Object c1="1.One" c2="1.Two" c3="1.Three" />
            <mx:Object c1="2.One" c2="2.Two" c3="2.Three" />
            <mx:Object c1="3.One" c2="3.Two" c3="3.Three" />
            <mx:Object c1="4.One" c2="4.Two" c3="4.Three" />
            <mx:Object c1="5.One" c2="5.Two" c3="5.Three" />
            <mx:Object c1="6.One" c2="6.Two" c3="6.Three" />
            <mx:Object c1="7.One" c2="7.Two" c3="7.Three" />
            <mx:Object c1="8.One" c2="8.Two" c3="8.Three" />
            <mx:Object c1="9.One" c2="9.Two" c3="9.Three" />
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn1" label="Column 1" toggle="true" selected="true" />
        <mx:Button id="btn2" label="Column 2" toggle="true" selected="true" />
        <mx:Button id="btn3" label="Column 3" toggle="true" selected="true" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="300" rowCount="5">
        <mx:columns>
            <mx:DataGridColumn dataField="c1" visible="{btn1.selected}" />
            <mx:DataGridColumn dataField="c2" visible="{btn2.selected}" />
            <mx:DataGridColumn dataField="c3" visible="{btn3.selected}" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

Peter

Dinesh Kumar D says:

November 25, 2009 at 10:24 pm

Hi,

i need to dynamically remove columns from the table.. how can this be done?

Peter deHaan says:

November 26, 2009 at 7:20 pm

@Dinesh Kumar D,

The DataGrid control’s columns is just an Array, so you can use array methods to remove columns. For example, the following code removes the first column (using the splice() method) each time you click the button:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            private function removeColumnAtIndex(idx:uint):void {
                var cols:Array = dataGrid.columns;
                cols.splice(idx, 1);
                dataGrid.columns = cols;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Remove column 0" click="removeColumnAtIndex(0);" />
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dataGrid"
                 width="400"
                 rowCount="6">
        <mx:columns>
            <mx:DataGridColumn dataField="col1" />
            <mx:DataGridColumn dataField="col2" />
            <mx:DataGridColumn dataField="col3" />
            <mx:DataGridColumn dataField="col4" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <mx:Array>
                        <mx:Object col1="A.1" col2="A.2" col3="A.3" col4="A.4"/>
                        <mx:Object col1="B.1" col2="B.2" col3="B.3" col4="B.4"/>
                        <mx:Object col1="C.1" col2="C.2" col3="C.3" col4="C.4"/>
                        <mx:Object col1="D.1" col2="D.2" col3="D.3" col4="D.4"/>
                        <mx:Object col1="E.1" col2="E.2" col3="E.3" col4="E.4"/>
                        <mx:Object col1="F.1" col2="F.2" col3="F.3" col4="F.4"/>
                    </mx:Array>
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:DataGrid>
 
</mx:Application>

Also, in my previous comment I showed how you can toggle a DataGridColumn’s visibility by setting the Boolean visible property.

Peter

Dinesh Kumar D says:

December 1, 2009 at 12:17 am

After i have added or removed the columns from the datagrid, the contents in the datagrid seems to disappear. I have tried assigning the Arraycollection to the dataprovider property of datagrid.. But still i dont see any contents.. could you tell me why?

Reply
charlie crystle says:

December 27, 2009 at 10:04 am

Peter–thanks for this. Not the post itself, but your generosity in the comments. I have found the documentation and samples from Adobe not very well articulated through code samples. The reliance on MXML is just so over the top; MXML is great except when you need flexibility. You should be able to program everything (and you can), but the examples are just not that great.

The more emphasis you put on AS3 examples the better. MXML is handy, but for flexibility, AS3 is much more useful and powerful.

Reply
charlie crystle says:

December 27, 2009 at 11:10 am

peter–sorry if this is a stupid question…

but why isn’t there an explicit method for adding rows to the datagrid? something like dg.AddRow(myObject.name, myObject.job….)

the flex datagrid is different from the flash datagrid…

http://www.adobe.com/devnet/flash/quickstart/datagrid_pt1/

Reply
- Peter deHaan says:
  
  December 27, 2009 at 11:13 am
  
  @charlie crystle,
  
  In Flex you add data to the data provider (ArrayCollection, etc), not to the control itself.
  
  Peter
  
  Reply
Varun Deshmukh says:

May 21, 2010 at 6:10 am

Hi All,
I have a very specific requirement. I need to generate columns dynamically depending on no. of fields. Ex- Lets say data is thr in a database as follows:
ROLE LOCATION VALUE
R1 L1 X
R1 L2 Y
R1 L3 Z
R2 L1 A
R2 L2 B
R2 L3 C
My output should be dislpayed as follows in the grid:
L1 L2 L3
R1 X Y Z
R2 A B C

The number of roles and locations change dynamically every time. So, depending upon the condition my locations may be from L1 to L5 and roles from R1 to R4.
What can you all suggest?

Thanks..

Reply
Rohit Agarwal says:

November 25, 2010 at 10:20 pm

Hi Peter,

Is there a way to catch when the column(s) has/have been added to the stage?

Which event(if any) could I track?

TIA.

Reply
cap says:

January 5, 2011 at 1:58 am

Hi ,
I found that when using the actionscripts to add the columns dynamically (or even just assign a dynamic columns array to the datagrid ). The width of the columns cannot control well. is there any good suggestion?

thx

cap

Reply
- nikolay nikolov says:
  
  January 17, 2011 at 2:00 am
  
  Hi Cap. I found the way that you can set up the width of the column.
  First set up minWidth with value that you need, and then change it to be 0.
  I had this problem too and this is my way to make it.
  Nikolay
  
  Reply
Rupesh says:

January 8, 2011 at 12:31 pm

I am trying to create a excel type of flex document. For Ex. on the X axis, i have the calendar.. starting from 1-Jan-2011 and runs till 31-Dec-2011. On the x axis, i have names of people.. person1, person2, person 3, person 4..
in shrt i am trying to create a scheduling application in flex.. could you please give me guidance as to how i need to proceed ?

Thanks a lot !

Reply
nikolay nikolov says:

January 17, 2011 at 12:36 am

Hi Cap. I found the way that you can set up the width of the column.
First set up minWidth with value that you need, and then change it to be 0.
I had this problem too and this is my way to make it.
Nikolay

Reply
Sabbir Manandhar says:

February 1, 2011 at 2:30 am

I have two dataGrid tables displayed one at a time.when one is visible other in is invisible.i created columns for both of them dynamically. The problem is, the header text is not displayed at first. but when i display second table and come back to first table, the header are now visible. Again if i reload the dataProvider, the header text are not seen.

can anybody explain the problem?

Reply
- Peter deHaan says:
  
  February 1, 2011 at 7:49 am
  
  @Sabbir Manandhar,
  
  Sounds like it may possibly be a bug. Can you please file a bug report at http://bugs.adobe.com/flex/ and include a simple test case and somebody can investigate.
  
  Thanks,
  Peter
  
  Reply
Deepa says:

February 1, 2011 at 4:31 pm

Hey Everyone,

I have a question about adding dynamic columns to Advanced Data Grid. The requirment is I need to query a table and take the row data and convert it to the columns.

private function constructDynamicColumnForADG():void{
var colsArray:Array = adg.columns ;
var column:AdvancedDataGridColumn ;
var res:Number = flash.system.Capabilities.screenResolutionX;
//adg.dataProvider = fixSubsystemUserList;
for each(var domainObj: in domainList)
{
column = new AdvancedDataGridColumn() ;
column.headerText = domainObj.name ;
column.width=res*.04;
colsArray.push(column) ;
}
adg.columns = colsArray ;
adg.invalidateDisplayList();

}

I am able to diplay # of columns depending upon the domainList (which is populated from the database). But the issue if I am not able to difplay the column names. What do I need to do? DO I have to use Classfactory?(I not sure about the its working though)

Any help is appreciated.

Thanks,
Deepa

Reply
- Deepa says:
  
  February 2, 2011 at 12:42 pm
  
  I got the solution for my issue. Below is the code. The only thing that I was missing was assigning datafeild and width.
  
  private function constructDynamicColumnForADG():void{
  var colsArray:Array = new Array() ;
  var column:AdvancedDataGridColumn ;
  var res:Number = flash.system.Capabilities.screenResolutionX;
  for each(var domainObj: in domainObjList)
  {
  column = new AdvancedDataGridColumn() ;
  column.headerText = domainObj.name ;
  column.dataField = domainObj.name;
  column.width=res*.50;
  colsArray.push(column) ;
  }
  adg.headerWordWrap=true;
  adg.headerHeight=50;
  adg.width = res*2;
  adg.columns = colsArray ;
  adg.invalidateDisplayList();
  }
  
  Reply
  - Deepa says:
    
    February 2, 2011 at 12:44 pm
    
    Just another comment: the domainObj is an abstract name that may point to the obj instance
Sonu says:

February 4, 2011 at 3:39 am

Hey,
I am using flex datagrid and i want to add dynamic columns init at runtime..I am able to do so using above code but I am reterving data from the database from two diff tables with the help of java..and the arraylist which contains all the values from database are constant(suppose it contins 10 values),so for adding new column into datagrid tat list needs to be dynamic…can anybody help me

Reply
Sonu says:

February 4, 2011 at 3:44 am

I want to provide that arrayList into the dataprovider to datagrid…so tat all the added columns will pickup tat values and display it into datagrid.

Reply
Sonu says:

February 4, 2011 at 3:57 am

In short how I will set dataprovider for dynamic datagrid..
Thanx in advance

Reply