check out the code:

will be posting the demo app shortly

(make a new dynamicGridColum.mxml component and add in an application tag)

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:HDividedBox xmlns:mx=”http://www.adobe.com/2006/mxml” height=”100%” width=”100%”

xmlns:containers=”framework.view.components.containers.*”

dividerRelease=”handleDivderRelease()”>

<mxcript>

<![CDATA[

import mx.controls.CheckBox;

import mx.controls.ComboBox;

public var counter : int = 0;

public var conDataProvider : Array =[

{label : "col1", data : "c1"},

{label : "col2", data : "c2"},

{label : "col3", data : "c3"},

{label : "col4", data : "c4"},

{label : "col5", data : "c5"},

{label : "col6", data : "c6"},

private function init():void{

// do something!!

}

private function hideShowColumns():void  {

var actualColumns:Array = ResultGrid.columns;

var actualSelectedColumns:Array =  lstColumns.selectedItems;

var dataGridColumnataGridColumn;

var sDataFieldtring;

var sDataFieldCurtring;

var columnVisibleoolean

for (var i:int=0;i<actualColumns.length;i++)  {

columnVisible = false

dataGridColumn = actualColumns[i];

sDataField = dataGridColumn.dataField;

for (var j : int = 0; j < actualSelectedColumns.length; j++)  {

if(actualSelectedColumns[j] == null) continue;

sDataFieldCur = actualSelectedColumns[j].data;

if (sDataFieldCur == sDataField)  {

columnVisible = true;

break;

}

}

if (columnVisible) {

dataGridColumn.visible = true;

}

else  {

dataGridColumn.visible = false;

}

}

}

private function selectAll():void{

lstColumns.selectedIndices=[0,1,2,3,4,5];

hideShowColumns();

}

private function clearAll():void{

lstColumns.selectedIndices=[];

hideShowColumns();

}

private function setDefault():void{

lstColumns.selectedIndices=[0,1,2,3];

hideShowColumns();

}

private function handleDivderRelease():void{

if(counter == 0){

controlBox.width =0

}else

if(counter == 1){

controlBox.width =120

}

counter = (counter +1)%2;

}

]]>

</mxcript>

<mx:VBox id=”controlBox” height=”100%” width=”120″ maxWidth=”120″  verticalGap=”0″ horizontalScrollPolicy=”off”>

<mx:Label text=”Selected columns” fontWeight=”bold” />

<mx:List height=”100%” width=”120″ id=”lstColumns” dataProvider=”{conDataProvider}”

labelField=”label” borderColor=”#000000″

allowMultipleSelection=”true” click=”hideShowColumns()”

selectedIndices=”[0,1,2,3]“/>

<mx:TextArea wordWrap=”true” selectable=”false” editable=”false” borderStyle=”none”

text=”For multiple selection use ctrl/shift keys” width=”120″ />

<mxpacer height=”5″ />

<mxutton label=”Select All”  width=”100%” click=”selectAll()”/>

<mxutton label=”Default”  width=”100%” click=”setDefault()”/>

<mxutton label=”Clear All” width=”100%” click=”clearAll()”/>

</mx:VBox>

<mx:VBox height=”100%” width=”100%”>

<mxataGrid  height=”100%” id=”ResultGrid” selectedIndex=”0″ enabled=”true” selectable=”true” creationComplete=”init()”>

<mx:columns>

<mxataGridColumn headerText=”col1″ dataField=”c1″ visible=”true” />

<mxataGridColumn headerText=”col2″ dataField=”c2″ visible=”true” />

<mxataGridColumn headerText=”col3″ dataField=”c3″ visible=”true” />

<mxataGridColumn headerText=”col4″ dataField=”c4″ visible=”true” />

<mxataGridColumn headerText=”col5″ dataField=”c5″ visible=”false” />

<mxataGridColumn headerText=”col6″ dataField=”c6″ visible=”false” />

</mx:columns>

</mxataGrid>

</mx:VBox>

</mx:HDividedBox>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Screenshot:

For source please read the complete article

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
height=”300″ width=”600″
backgroundColor=”white”
creationComplete=”init();”>

<mxcript>
<![CDATA[
import mx.events.SliderEvent;

private function init():void {
if (checkBox.selected) {
arrColl.filterFunction = sliderFilterFunc;
arrColl.refresh();
}
}
private var comb : Array = [{label:"value1",data:0},
{label:"value2",data:1},
{label:"value3",data:2}];

private function checkBox_change(evt:Event):void {
if (checkBox.selected) {
arrColl.filterFunction = sliderFilterFunc;
} else {
arrColl.filterFunction = null;
}
arrColl.refresh();
}

private function slider_change(evtliderEvent):void {
arrColl.refresh();
}

private function sliderFilterFunc(itembject)oolean {
var booloolean;
switch(vx.selectedItem.data){
case 0:
bool = checkData(item.value1);
break;
case 1:
bool = checkData(item.value2);
break;
case 2:
bool = checkData(item.value3);
break;
}
return bool;
}

private function checkData(num:Number)oolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;

}

]]>
</mxcript>

<mx:ArrayCollection id=”arrColl”>
<mxource>
<mx:Array>
<mxbject label=”One” value1=”100″ value2=”100″ value3=”60″/>
<mxbject label=”Two” value1=”2″ value2=”90″ value3=”600″/>
<mxbject label=”Three” value1=”300″ value2=”40″ value3=”200″/>
<mxbject label=”Four” value1=”40″ value2=”100″ value3=”100″/>
<mxbject label=”Five” value1=”500″ value2=”200″ value3=”400″/>
<mxbject label=”Six” value1=”60″ value2=”300″ value3=”80″/>
<mxbject label=”Seven” value1=”700″ value2=”500″ value3=”30″/>
<mxbject label=”Eight” value1=”800″ value2=”50″ value3=”50″/>
<mxbject label=”Nine” value1=”90″ value2=”90″ value3=”50″/>
<mxbject label=”Ten” value1=”100″ value2=”10″ value3=”100″/>
</mx:Array>
</mxource>
</mx:ArrayCollection>

<mx:ApplicationControlBar dock=”true”>
<mx:HBox width=”100%”>
<mx:Label text=”filter” />
<mx:CheckBox id=”checkBox” selected=”true” change=”checkBox_change(event);” />
<mx:ComboBox id=”vx” dataProvider=”{comb}”/>
<mx:Label text=”Values” />
<mx:HSlider id=”slider”
minimum=”0″ maximum=”1000″
values=”[0,1000]” labels=”[0,500,1000]”
thumbCount=”2″ showTrackHighlight=”true”
snapInterval=”1″ tickInterval=”100″
liveDragging=”true” change=”slider_change(event);” />
</mx:HBox>
</mx:ApplicationControlBar>

<mxanel status=”{arrColl.length}/{arrColl.source.length} item(s)”>
<mxataGrid id=”dataGrid” dataProvider=”{arrColl}” verticalScrollPolicy=”on” />
</mxanel>

</mx:Application>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Example below: shows how to call a function to print a datagrid

public function printDataGrid() : void
{
var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();
Application.application.addChild(thePrintView);
if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);
printJob.addObject(thePrintView);

printJob.send();
Application.application.removeChild(thePrintView);
}

<mxataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>

Example below: shows printview

<!– FormPrintView.mxml –>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mxrintDataGrid id=”printableDataGrid” width=”90%” height=”100%”>
<!– Specify the columns to ensure that their order is correct. This is not mandatory–>
</mxrintDataGrid>
</mx:VBox>

Below are the simple steps to print the DataGrid in Flex

1. Create an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Create an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView (if you create<mxrintDataGrid/> in  the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mxrintDataGrid/> component. This looks a bit ugly as we do not want to see that extra space in our application). Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container

“Application.application.addChild(thePrintView);”

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class, You also need to set the columns of the original dataGrid to the thePrintView object. You can also control the appearance of the printDataGrid object as follows

printDataGrid.setStyle(”fontSize”, 8);
printDataGrid.setStyle(”wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer

Download source here

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The dataGridDefaultSort functions requires two input items. The dgName which as the variable suggest is the name of the DataGrid and the dgColumn, DataGrid Column, to be sorted by the numbers. column numbering begins with zero.

These input items are used with the DataGridEvent below and is dispatched (excuted). The DataGridEvent has a total of 9 values for successful operation. They are listed below in expanded detail.

1. typetring — The event type; indicates the action that caused the event. This is represented by the dgName input variable. The DataGridEvent.HEADER_RELEASE constant defines the value of the type property of the event object for a headerRelease event, which indicates that the user pressed and released the mouse on a column header
2. bubblesoolean (default = false) — Specifies whether the event can bubble up the display list hierarchy.
3. cancelableoolean (default = false) — Specifies whether the behavior associated with the event can be prevented.
4. columnIndex:int (default = -1) — The zero-based index of the column where the event occurred. This is represented by the dgColumn input variable.
5. dataFieldtring (default = null) — The name of the field or property in the data associated with the column.
6. rowIndex:int (default = -1) — The zero-based index of the item in the in the data provider.
7. reasontring (default = null) — The reason for an itemEditEnd event.
8. itemRenderer:IListItemRenderer (default = null) — The item renderer that is being edited or the header renderer that was clicked.
9. localX:Number — Column x-position for replaying columnStretch events.

Call this function anywhere in the program and  use as per above attributes.

private function dataGridDefaultSort(dgNamebject, dgColumn:int):void{
dgName.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,   false,true,dgColumn,null,0,null,null,0));
}

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The Objective of this example :

• How to create custom item rendrer using Updatedisplaylist and data property.
• How to use the itemrendrer (detail).
• How to use custom cursors in a dataGrid.
• how to write a custom component extending a base component in this case dataGrid. (highlight a row in the dataGrid).

Download source:

• search_datagrid.mxml (Main application)
• UserLabelRendr3r.as (Item rendrer)
  
• CustomRowColorDG.as (highlight selected row in a dataGrid)

Sample : search_datagrid

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Example:
<mx:itemRenderer>
<mx:Component>
<mx:VBox >
<mxutton label=”Remove” click=”outerDocument.remove()“/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.