Hi there … some weeks ago I blogged about my struggles with Flex and its built-in DataGrid. After some time of getting to know “my Grid”, I decided to refactor the previous example.

To begin with here’s the new demo … (sourceview)

It pretty much looks the same as last time but I changed some things behind the scenes – that being:

1) I excluded the ComboBox for selecting a new item from the actual DataGrid and added a HBox that handles the selection underneath.

<mx:HBox
  width="500" height="29"
  paddingLeft="5" paddingTop="2"
  borderSides="left right"
  borderThickness="1" borderColor="#b7babc" borderStyle="solid"
  horizontalGap="0"
  backgroundColor="{_arr.length % 2 == 0 ? 0xf7f7f7 : 0xFFFFFF}"
  visible="{_checkVisibility()}"
  includeInLayout="{_checkVisibility()}"
  >

  <mx:Box width="16" height="20" paddingTop="2">
    <mx:Image source="{imgAdd}"
      width="16" height="16"
            verticalCenter="0"
            verticalAlign="middle"
            horizontalAlign="center"
         />
  </mx:Box>

  <mx:Spacer width="5" />

  <mx:ComboBox
    id="addExpenseCmb"
    prompt="Add expense ..."
    height="20"
    maxHeight="20"
    dataProvider="{_vals}"
    change="onChangeAddCost(event);"
  />

</mx:HBox>

2) The text-part’s ItemRenderer (first column in grid) was replaced by the standard renderer.

<mx:DataGridColumn 
  headerText="Question"
  width="260" 
  editable="false"
  resizable="false" 
  draggable="false" 
  sortable="false" 
  wordWrap="true"
  dataField="question" 
  />

After a while of working with the previous solution I was really getting bugged with the ComboBox (and everything that came with it) being a part of the ItemRenderer and hence a part of the DataGrid itself. So I decided to exclude the addition of new values/expenses from the normal view of the data (makes sense, doesn’t it ;) ). So one can still dynamically add rows to the DataGrid, but this is done by an independent component, handling all the extra weight.

I also did some charting with the grid’s data, maybe i’ll have the time to wrap up another example including the delicious-looking PieCharts :)

Cheers

PS: I only used one of their icons, but famfamfam did a great job of putting together a really huge set of free icons.