Esta es una clase que hice para Flex para mostrar y ocultar las columnas de cualquier instancia de DataGrid sin ensuciarse con mucho codigo.
Menu contextual del DataGrid
Se puede implementar en solo una linea de codigo:
new datagridColumnSelector(datagridInstance, [campoignorado1]);
El primer argumento es obligatorio y debe ser una instancia de DataGrid. El segundo argumento es opcional y debe recibir un Array con los nombres de las columnas a ignorar.
Cambiando algunas propiedades por defecto:
datagridColumnSelector.label_hide = "Ocultar"; datagridColumnSelector.label_show = "Mostrar"; var selector:datagridColumnSelector = new datagridColumnSelector(data_dg); selector.hidden = ["col3"];
En el siguiente ejemplo la columna 4 y 5 estan ocultas por defecto. Tambien se decide ignorar la columna 3 para que el usuario no pueda ocultar todas las columnas.
Nota que el valor del atributo headerText en cada DataGridColumn es usado en el menu contextual para que el usuario pueda identificar la columna.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" creationComplete="init()"
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #E7E7E7]"
paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" horizontalAlign="left" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import net.danielzegarra.utils.datagridColumnSelector;
protected function init():void{
new datagridColumnSelector(data_dg, ["col3"]);
}
]]>
</mx:Script>
<mx:Label text="Haga un clic secundario sobre el DataGrid para mostrar u ocultar columnas."/>
<mx:DataGrid id="data_dg" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Columna 1" dataField="col1"/>
<mx:DataGridColumn headerText="Columna 2" dataField="col2"/>
<mx:DataGridColumn headerText="Columna 3" dataField="col3"/>
<mx:DataGridColumn headerText="Columna 4" dataField="col4" visible="false"/>
<mx:DataGridColumn headerText="Columna 5" dataField="col5" visible="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Y el resultado:
Ver la fuente | Descargar datagridColumnSelector Class
Nota: Funciona tambien con Air aunque es preferible usar las clases nativas de Adobe Air.
