Introduction to Datagrids

Datagrids give largest possible options for user to interact with data. This brings performance and size overhead to be kept in mind.

Use editable property to make the grid uneditable. draggableColumns property used to enable/disable column resizing (true by default). variableRowHeight property used to tell Flex to resize row's height according to renderer. The columns for the grid can be specified within <mx:columns> tags. Useful when we want the order of columns to be different from what is received.

Each column is specified using <mx:DataGridColumn> tag. Use its dataField property to specify the field to use to populate, headerText to give column header and editable to determine if it is editable (The parent grid has to be editable for this).




<mx:DataGrid id="myGrid" editable="true" draggableColumns="false">
   <mx:columns>
      <mx:DataGridColumn dataField="field1" headerText="Field1 Data" editable="false"/>
      <mx:DataGridColumn dataField="editableField" headerText="Input"/>
   </mx:columns>
</mx:DataGrid>

Q&A

1. How can you make a DataGrid editable?
2. How do you control column resizing in a DataGrid?
3. What will you do if you want the order of columns to be different from the order of data received in a DataGrid?
4. Briefly explain the steps involved in initializing a column in a DataGrid.