Dynamically adding new columns to a DataGrid control in Flex

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

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

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,

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

Peter

Reply

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

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.

Reply

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,

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

Reply

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

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

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

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

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