reset component based on its original mxml

Question

I have a datagrid that allows user to change and save columns widths and visibility. I'd like to add a reset button that would just reset the datagrid to it's original mxml. This is the original datagrid code.

<mx:DataGrid x="10" y="47" height="159" width="250" dataProvider="{acOffspring}" id="offspring_dg">
    <mx:columns>
        <mx:DataGridColumn headerText="Tag" visible="true" dataField="animal_ptag" width="121"/>
        <mx:DataGridColumn headerText="Sex" dataField="animal_sex" width="45"/>
        <mx:DataGridColumn headerText="Birth Date" visible="true" dataField="animal_birthdate" width="82"/>
        <mx:DataGridColumn headerText="Name" visible="false" dataField="animal_name" width="82"/>
        <mx:DataGridColumn headerText="Status" visible="false" dataField="status_status" width="82"/>
        <mx:DataGridColumn headerText="Breed" visible="false" dataField="breed_breed" width="82"/>
    </mx:columns>
</mx:DataGrid>

Answer 1

You have two options that I see:

The first is to destroy the component and create a new instance of it. Like this:

container.removeChild(offspring_dg);
offspring_dg= new myDataGrid();
container.addChild(offspring_dg);

The second is to store the default values in some manner and then do a loop and reset all the relevant properties. Something like this:

Column1InitialWidth = offspring_dg.columns[0].width
Column1InitialVisibility = offspring_dg.columns[0].visibility
etc... 

When it comes time to reset them just do the same thing in reverse:

offspring_dg.columns[0].width = Column1InitialWidth
offspring_dg.columns[0].visibility = Column1InitialVisibility 

I'm sure this approach could be encapsulated a bit more if you're dealing with a lot of columns.