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

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

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

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

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

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.

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

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

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

Appreciate any help.

-G