Posts Tagged ‘datagrid

Here is an example of Data grid filtered using a H slider  with 2 thumbs to select the range of date for which to  filter the data grid. The combo box is used to select the specific column on which the filter has to be applied to. The check box is used to either enable or disable the filter functionality.



For source please read the complete article Read the rest of this entry »


There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent on-line reference for Flex. I thought of sharing my experience and the way I successfully printed the dataGrid in Flex.

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();
if(printJob.start() != true)

//Set the print view properties.
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);


<mx:DataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>

Example below: shows printview

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

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<mx:PrintDataGrid/> in  the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mx:PrintDataGrid/> 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


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

print datagrid
Download source here

The below example  gives you a hook to sort a  particular column in a datagrid without user input. One can use the below function where ever a datagrid has to have a default sort order on its column(s).  Note : This works with flex 2 datagrid and not with Advanced datagrid in Moxie.

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. type:String — 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. bubbles:Boolean (default = false) — Specifies whether the event can bubble up the display list hierarchy.
3. cancelable:Boolean (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. dataField:String (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. reason:String (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(dgName:Object, dgColumn:int):void{
dgName.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,   false,true,dgColumn,null,0,null,null,0));

The following example is a Simple searchable DataGrid, I have also included dataGrid item renderer to show how to define/use a dataGrid “itemRendrer”. Search and Highlight a row depending on the searched text in a dataGrid. Define a cursor to traverse dataGrid rows.

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:

Sample : search_datagrid

I stumbled upon an unknown property as I was trying to use an Inline Item Renderer on my DataGrid Columns. If you use the <mx:component> tag with your inline item renderer and try to have your component call an event in your main application you will get a nasty “Access to undefined method ……”. This is because your Inline Item Renderer is unaware of what exists in your main application. But you can use the outerDocument property to access event handlers in you main application.

<mx:VBox >
<mx:Button label=”Remove” click=”outerDocument.remove()“/>

The following example shows the customize data grid by applying a copy and paste functionality.

The idea is very simple but i think its useful, the data copied in clipboard can directly paste in excel and it will pasted in proper columns rather than in a single column, I tested this on Excel 2007.

for the running examples click here

for the complete source here

Read the rest of this entry »

i had a hard time figuring out how to add remove columns  dynamically from a datagrid and after lots of code iterations i have reached a workable scenario. i still need to add other important functionalities. close headerrenderer for each column, delete entire row functionality , user defined default state … etc

check out the code:

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

Read the rest of this entry »

Tags: ,

I have moved to a different location

check out my new home Flexout


May 2018
« May    

Blog Stat

  • 84,065 Hop's so far!!!

follow me


Linkedin Blogger Twitter Youtube Orkut

latest flickr photos

top rated