Figure 4-12. The advanced data grid <customer><first>Jack</first> <last>Herrington</last></customer> <customer><first>Lori</first> <last>Herrington</last></customer> <customer><first>Megan</first> <last>Herrington</last></customer> </mx:XMLList> <mx:DataGrid dataProvider="{customers}" editable="true"> <mx:columns> <mx:DataGridColumn dataField="first" /> <mx:DataGridColumn dataField="last" /> </mx:columns> </mx:DataGrid> </mx:Application>
All I needed to do was add the editable attribute to the Data Grid and set it to true. When I bring this up in the browser and double-click on a cell, I see something similar to Figure 4-13. Of course, to make the example functional I would need to listen to the editing events and update the backend data store to match. By default, the DataGrid uses a text editor to edit the cell contents, but you can provide your own editor renderer to use whatever controls you like to edit the value in the cell. 54 | Chapter 4:â&#x20AC;&#x201A;Flex Controls and Layout