Dynamic AdvancedDataGridColumn in Flex 4
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
This little example shows you how you can add an AdvancedDataGrid column to your AdvancedDataGrid dynamically.
First lets create a simple layout to hold our AdvancedDataGrid in your application file:
1 2 3 4 5 6 7 8 9 | <s:layout> <s:VerticalLayout paddingLeft="5" paddingTop="5"/> </s:layout> <mx:AdvancedDataGrid id="adg" dataProvider="{ac}" width="450" height="250"> <mx:columns> <mx:AdvancedDataGridColumn dataField="firstname" headerText="Firstname"/> </mx:columns> </mx:AdvancedDataGrid> </s:Application> |
Notice that the AdvancedDataGrid uses a dataProvider, declare that in your script section:
1 2 3 4 | import mx.collections.ArrayCollection; [Bindable] private var ac:ArrayCollection; |
Now create a method init() that’s called on the initialize event of the application that fills the ArrayCollection with some dummy data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | private function init():void { // Create some dummy data ac = new ArrayCollection(); var obj:Object = new Object(); obj.firstname = "John"; obj.lastname = "Doe"; ac.addItem(obj); obj = new Object(); obj.firstname = "Jane"; obj.lastname = "Doughnut"; ac.addItem(obj); } |
Now lets create the stuff that’s going to help us add a column to our existing AdvancedDataGrid. First create a button
above the AdvancedDataGrid in the layout:
1 | <s:Button id="addColumnBtn" click="addColumn()" label="Add Last Name Column"/> |
Notice that it calls a method addColumn(), lets add that to our script section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | private function addColumn():void { // Get the AdvancedDataGrid colums (array) var columns:Array = adg.columns; // Create new AdvancedDataGridColumn var adgColumn:AdvancedDataGridColumn = new AdvancedDataGridColumn(); // Set the headerText and dataField properties adgColumn.headerText = "Lastname"; adgColumn.dataField = "lastname"; // Set the column width adgColumn.width = 225; // add the new column to the existing column array with the push() method columns.push(adgColumn); // set the AdvancedDataGrid columns to the array of columns adg.columns = columns; // Hide the Button addColumnBtn.visible = false; } |
Run the application, at first you should see one column with the button to add the second column. After you’ve clicked it, the second column appears and the button disappears.
Check out the sample application:
Here’s the complete source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" initialize="init()" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var ac:ArrayCollection; private function init():void { // Create some dummy data ac = new ArrayCollection(); var obj:Object = new Object(); obj.firstname = "John"; obj.lastname = "Doe"; ac.addItem(obj); obj = new Object(); obj.firstname = "Jane"; obj.lastname = "Doughnut"; ac.addItem(obj); } private function addColumn():void { // Get the AdvancedDataGrid colums (array) var columns:Array = adg.columns; // Create new AdvancedDataGridColumn var adgColumn:AdvancedDataGridColumn = new AdvancedDataGridColumn(); // Set the headerText and dataField properties adgColumn.headerText = "Lastname"; adgColumn.dataField = "lastname"; // Set the column width adgColumn.width = 225; // add the new column to the existing column array with the push() method columns.push(adgColumn); // set the AdvancedDataGrid columns to the array of columns adg.columns = columns; // Hide the Button addColumnBtn.visible = false; } ]]> </fx:Script> <s:layout> <s:VerticalLayout paddingLeft="5" paddingTop="5"/> </s:layout> <s:Button id="addColumnBtn" click="addColumn()" label="Add Last Name Column"/> <mx:AdvancedDataGrid id="adg" dataProvider="{ac}" width="450" height="250"> <mx:columns> <mx:AdvancedDataGridColumn dataField="firstname" headerText="Firstname"/> </mx:columns> </mx:AdvancedDataGrid> </s:Application> |
Related posts:
- Flex Dynamic Chart Example
- Style AdvancedDataGrid depending on data example
- Tree in Advanced DataGrid Example
- Save Data to File System with AIR in Flex 4
- Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(5 votes, average: 4.20 out of 5)
Loading ...Comments
One Response to “Dynamic AdvancedDataGridColumn in Flex 4”
exelente tutorial