How to Build a Flex DataGrid From Code
Using the Adobe Flex language, you can create interactive animations on your website. The Flex DataGrid control pulls data from a database or XML file and displays it in a grid component on your pages. You build the DataGrid code in the Flex designer and bind the data that you want to display in the control. The DataGrid control makes it convenient to display lists of data because you don’t have to manually design the table.
Other People Are Reading
Instructions
-
-
1
Open the Adobe Flex editor on your programming desktop and open the project you want to edit. Open the Web form in which you want to display your DataGrid.
-
2
Click the "Code View" tab to see the code behind the Web form. Drag and drop the DataGrid control from the toolbox to the location at which you want the grid to display the data. The Flex editor automatically draws the grid and creates the basic layout in the code view.
-
-
3
Change the "HeaderText" property to the column header names you want to display. For instance, if you have a list of customers to display, change the first column header to "Customer Name."
-
4
Change the "ID" property to the name you want to assign to the grid. This is the ID you’ll use if you want to customize or manipulate the grid in the future.
-
5
Bind the data to the grid. The following example code binds the XML file named "mycustomers.xml" to the grid:
<mx:Model id="customers" source="mycustomers.xml"/>
-
6
Add the new data source to the grid's properties. Return to the DataGrid control you added earlier and insert the following property:
dataProvider="customer"
Notice the "dataProvider" property value is the name of the data set you created earlier. This binds the data to the grid.
-
7
Click "Save" and then click "Run" to execute the new code in the Flex debugger. Review the grid to ensure that the data displays and is placed where you want it to appear in the Web page.
-
1
