Tuesday, September 13, 2011

Precision focus control within the Spark DataGrid

So, in preparation for my MAX 360Flex Unconference presentation on Tues Oct 4th at 2pm (http://www.360flex.com/blog/2011/08/360max-the-schedule-2/) I've put together this demo about how to get precision focus control within the Spark Datagrid.

In this example you can see:

  • Set focus to first editable item
  • Tab through occasionally editable fields
  • Focus with a mixture of multiple occasionally editable fields within a record
  • Focus on a particular data item
  • Focus using Tab, Shift+Tab, Arrows, and Page-Up and Page-Down
  • Remove Focus
  • Focus by clicking on a row
(Note, I've left the "disabled" cells editable, as I'm only changing the alpha. This is so that you can see that even if you click in to the non-editable fields directly, that the editing sessions (via the "Dashboard") doesn't get set)

view source

The slide deck for the preso will be coming soon.


  1. While trying the demo, I've got an RTE:

    ReferenceError: Error #1069: Property data not found on spark.skins.spark.ScrollerSkin and there is no default value.
    at examples.sparkFocusExample::FocusExampleSpark/setFocusToSelectedDataClick()
    at examples.sparkFocusExample::FocusExampleSpark/___FocusExampleSpark_DataGroup1_click()

    I can reproduce it consistently by clicking randomly and very fast on the A, B, C, D, E, etc buttons.

  2. Given that I was responsible for implementing a bunch of these features in a grid used at Morgan Stanley on top of the base Flex 3 DataGrid, this is pretty impressive to see that these are features of Spark Data Grid.

    Great job showcasing some of the new features of the Spark data grid.

    -Adam Parrish

  3. @JS, Thanks I'll see if I can reproduce the RTE. I wasn't able to on my first attempt, but I'll experiment more with those buttons to see if I can solve it.

    @neosavvy. Thanks! I wouldn't say that these are new features of the Spark DataGrid, but it is certainly WAY easier to implement than I was expecting. I recently implemented all of these features on the AdvancedDataGrid, which is incredibly complicated and error prone. Actually some of the features that the I could add to the Spark grid I couldn't even get the ADG to do without monkey patching.

  4. I can't see the source code, is there a way you can fix it so we can have a look at it?

  5. Javi, if the link to the source code isn't working, you can find it at http://www.squaredi.com/blogswfs/sparkDataGrid/fullFocus/srcview/index.html