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.

6 comments:

  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.

    ReplyDelete
  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
    http://blog.neosavvy.com/wordpress/

    ReplyDelete
  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.

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

    ReplyDelete
  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

    ReplyDelete